React Native 入门（九） - Flexbox 弹性盒

2017-10-31 本文已影响158人 ayuhani

当前 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

在组件的 style 中指定justifyContent 可以决定其子元素沿着主轴的排列方式，一共有 5 个取值。这里为了演示方便，我们把主轴设置为 row 。

flex-start(default)：默认的排列方式。在主轴方向上从行首开始依次顺序对齐排列。

center：子元素在父容器的主轴方向上居中排列，首元素左侧到父容器左边界的距离与尾元素右侧到父容器右边界的距离相等。

flex-end：子元素顺序排列在父容器的尾部。

space-between：子元素在主轴方向上平均分布。如果剩余空间为负或者只有一个子元素，则该值等同于 flex-start 。否则，第 1 个子元素左边与父容器的左边线对齐，而最后 1 个子元素的右边与父容器的右边线对齐，然后剩余的元素分布在该行上，相邻元素的间隔相等。顾名思义，空白部分只存在于两个元素之间。