React Native学习（6）Flexbox布局

最新推荐文章于 2024-07-04 21:26:38 发布

原创最新推荐文章于 2024-07-04 21:26:38 发布 · 223 阅读

1 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

11 篇文章

订阅专栏

博客介绍了组件布局中与flex相关的属性。指定flexDirection可决定布局主轴，默认竖直轴；指定justifyContent能决定子元素沿主轴的排列方式；指定alignItems可决定子元素沿次轴的排列方式，且stretch选项生效需子元素在次轴无固定尺寸。

Flexbox布局

flexDirection
Justify Content
Align Items

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

flexDirection

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列，默认值是竖直轴(column)方向。
如：

/**
 * 慢慢学习
 * https://blog.youkuaiyun.com/quanhaoH
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'row',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

在这里插入图片描述

Justify Content

在组件的 style 中指定 justifyContent 可以决定其子元素沿着主轴的排列方式。对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及 space-evenly。
如：

/**
 * 慢慢学习
 * https://blog.youkuaiyun.com/quanhaoH
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'column',
		//flex-start center flex-end space-around space-between space-evenly
		justifyContent: 'space-around',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

在这里插入图片描述

Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
注意：注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。
如：

/**
 * 慢慢学习
 * https://blog.youkuaiyun.com/quanhaoH
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class MyApp extends Component {
  render() {
	  return (
      <View style={styles.myView}>
        <View style={styles.red} />
        <View style={styles.bigBlue} />
        <View style={styles.black} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
	myView: {
		flex: 1,
		//row 为横向排列 columu为竖直排列
		flexDirection: 'row',
		//flex-start从左开始(不能使用columu) center flex-end从右开始(不能使用columu) space-around space-between space-evenly
		justifyContent: 'center',
		//flex-start顶部开始 center底部开始 flex-end stretch
		alignItems: 'flex-end',
		backgroundColor: 'yellow',
	},
    red: {
	    width: 50,
	    height: 50,
        backgroundColor: 'red',
    },
    bigBlue: {
	    width: 100,
	    height: 100,
        backgroundColor: 'blue',
    },
    black: {
        width: 150,
	    height: 150,
	    backgroundColor: 'black',
    },
});

AppRegistry.registerComponent('MyApp', () => MyApp);