当前 RN 版本：0.49
操作环境：Windows 10

React Native 使用 FlexBox 的规则来指定某个组件的子元素的布局方式，这种方式可以在不同屏幕尺寸的设备上提供一致的布局结构。React Native 中的 FlexBox 的工作原理和 web 上的 CSS 存在一定的差异：在 RN 中 flexDirection 的默认值是 column 而不是 row，而且 flex 只能指定一个值。

一般来说，使用 flexDirection、justifyContent 和 alignItems 三个样式属性就已经能满足大多数的布局需求，具体的各个属性的组合情况，大家可以自己去试试看看效果。

Flex Direction

在组件的 style 属性中指定 flexDirection 可以决定布局的主轴和侧轴。首先我们先通过一个简单的图形来了解一下主轴和侧轴。

RN 中默认的 flexDirection 是 column 纵向排列，这种情况下纵向就是主轴，横向是侧轴；将其改为 row 横向排列，横向就是主轴，纵向是侧轴。无论是主轴还是侧轴，都是起点在左、上，终点在右、下。它一共有 4 个取值。

• column(default)：默认的排列方式，纵向由上到下。从屏幕顶部开始，方块 1 到方块 4 依次排列。

• column-reverse：纵向由下向上。从屏幕底部开始，方块 1 到方块 4 依次排列，注意这个时候 方块 1 在最底部。

• row：横向从左向右依次排列。从屏幕左侧开始，方块 1 到方块 4 依次排列。

• row-reverse：横向从右向左依次排列。从屏幕右侧开始，方块 1 到方块 4 依次排列。

Justify Content

justifyContent 决定了父容器中的子元素在其主轴方向上的对齐方式，共有 5 个取值。这里为了演示方便，我们将弹性容器的主轴设置为 row 。

• flex-start(default)：默认的排列方式，子元素从父容器主轴的起点开始依次排列。

• center：子元素居中排列，第一个子元素到主轴起点的最近距离与最后一个子元素到主轴终点的最近距离相等。

• flex-end：子元素靠在主轴的终点处正序排列。

• space-between：子元素平均分布在主轴上。如果剩余空间为负或者只有一个子元素，则该值等同于 flex-start 。否则，第一个子元素的外边距和主轴的起点边线对齐，而最后一个子元素的外边距和主轴终点的边线对齐，然后剩余的子元素分布在该行上，相邻元素的间隔相等。顾名思义，‘空白部分’只存在于元素之间。

• space-around：子元素平均分布在主轴上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个子元素，则该值等同于 center 。否则，子元素彼此间隔相等，同时首尾两个元素和父容器边界之间留有两元素间隔的一半。顾名思义，‘空白部分’存在于元素的两侧。

Align Items

alignItems 决定了父容器中的子元素在其侧轴方向上的对齐方式，共有 4 个取值。这里为了演示方便，我们将主轴设置为 column，主轴默认的排列方式为 flex-start，所以我们可以看到四个元素由上向下依次排列。

• stretch(default)：默认的排列方式。元素在侧轴方向上被拉伸到与容器相同的宽度或高度。要使 stretch 选项生效的话，子元素在侧轴方向上不能有固定的尺寸，只有将代码中子元素的宽度去掉之后它才能生效。

• flex-start：子元素紧靠侧轴起点位置的边界排列。

• center：子元素在侧轴上居中放置。

• flex-end：子元素紧靠侧轴终点位置的边界排列。

Flex Wrap

flexWrap 定义了子元素是否可以在父容器内自动换行排列，默认是 nowrap 。我们改变子元素的宽度，看一下效果。

• nowrap：默认的排列方式。元素只排列在一行或一列上。可以看到方块 4 已经溢出屏幕。

• wrap：元素在可用空间不足时，会自动换行。

总结

以上就是 React Native 中几种常用的布局，更多的布局样式可以参考这篇文章：布局样式属性 。想要灵活的运用布局必须要自己亲自动手，多多练习才是。