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