React Native 布局和 Flexbox

React Native Flexbox 是一种指定组件子项布局的算法。它在不同的屏幕尺寸上提供一致的布局。

Flexbox 的属性

Flexbox 提供三个主要属性来实现所需的布局。这些属性是：flexDirection、justifyContent 和 alignItems。

React Native Flex 方向

flexDirection 将样式添加到组件在其布局的主轴上。它具有 row 和 column 属性，分别用于水平和垂直组织子项。默认 flexDirection 是 column。

输出

React Native 内容对齐

justifyContent 确定子组件沿主轴的分布。子组件分布在开始、结束、中心或均匀分布空间。

输出

React Native 元素对齐

alignItems 确定子组件沿次要轴的对齐方式。如果主轴是 column，则次要轴是 row，当主轴是 row 时，次要轴是 column。使用 alignItems，子项在开始、结束、中心或拉伸处对齐。

输出

注意：如果子项沿次要轴具有固定尺寸，则拉伸将不起作用。在上面的示例中，alignItems: stretch 将不起作用，直到我们删除 width: 50。