布局参数

先看Flex 布局教程：语法篇，了解Flex布局的历史和基本概念。

Flexbox布局

• flex
• flexDirection
• justifyContent
• alignItems
• flexWrap
• alignSelf

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
 
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.red}/>
          <View style={styles.blue}/>
          <View style={styles.orange}/>
      </View>
    );
  }
}
   
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  red: {
      flex: 1,
      width: 100,
      backgroundColor: 'red'
  },
  blue: {
      flex: 2,
      width: 100,
      backgroundColor: 'blue'
  },
  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange'
  }
});

flexDirection

主轴方向，默认值为column

• row: child水平方向排列
• column: child竖直方向排列(默认)
• row-reverse: child水平方向反向排列
• column-reverse: child竖直方向反向排列

justifyContent

固定好主轴之后，可以通过justifyContent来指定主轴方向child的排列方式

• flex-start: child在主轴起点方向排列（默认）
• flex-end：child在主轴终点方向排列
• center：child居中对齐主轴
• space-between：child在主轴方向相邻child等间距对齐，首尾child与父容器对齐
• space-around：child在主轴方向相邻child等间距对齐，首尾child与父容器的间距相等且为相邻child间距的一半
• space-evenly：child在主轴方向均匀分布。相邻间距与首尾间距相等

alignItems

副轴上child的排列方式

• flex-start: child对齐副轴起点(默认)
• flex-end: child对齐副轴终点
• center: child居中对齐副轴
• stretch: child为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
• baseline: 有文本存在时，child在副轴方向基于第一个文本基线对齐

flexWrap

如果再增加一个View，由于空间不足它会展示不全。这时可以使用flexWrap属性，它可以支持自动换行展示。

• nowrap: 不换行(默认)
• wrap: 自动换行

alignSelf

alignSelf属性类似于alignItems，它也是控制副轴上的排列规则，不同的是它使用的对象是child自己。它可以改变父容器alignItems的属性控制的child排列规则，在副轴上实现自己的排列规则。默认值为auto，继承父容器的alignItems属性。因此它也有五个可选值：

• flex-start
• flex-end
• center
• stretch
• baseline

参考

• 5分钟吃透React Native Flexbox
• https://reactnative.dev/docs/layout-props
• Flex 布局教程：语法篇