12、React Native 布局与导航实战指南

React Native 布局与导航实战指南

1. Flexbox 布局基础

Flexbox 是 React Native 中用于创建用户界面和控制元素定位的高效布局方式。它基于 W3C 的 flexbox 网络规范，但并非 100% 遵循其 API。Flexbox 能让我们轻松地对布局中的元素进行对齐和空间分配，即使元素的大小未知或动态变化。需要注意的是，Flexbox 布局仅适用于 View 组件。

控制 Flexbox 布局的对齐属性包括： flex 、 flexDirection 、 justifyContent 、 alignItems 、 alignSelf 和 flexWrap 。

2. 使用 flex 属性调整组件尺寸

flex 属性指定了组件调整自身尺寸以填充其所在容器空间的能力，该值相对于同一容器中其他元素的 flex 属性而言。

例如，有一个高度和宽度均为 300 的 View 元素，其内部子 View 元素的 flex 属性为 1，那么子视图将完全填充父视图。若再添加一个 flex 属性为 1 的子元素，每个视图将在父容器中占据相等的空间。

我们可以将 flex 属性视为百分比。例如，若想让子组件分别占据 66.6% 和 33.3% 的空间