使用 Flexbox 布局

组件可以使用 Flexbox 算法来指定其子组件的布局。Flexbox 旨在在不同屏幕尺寸上提供一致的布局。

通常你会组合使用 flexDirection、alignItems 和 justifyContent 来实现合适的布局。

警告

Flexbox 在 React Native 中的工作方式与网页上的 CSS 类似，但有一些例外。 默认值不同，flexDirection 默认是 column 而非 row，alignContent 默认是 flex-start 而不是 stretch，flexShrink 默认是 0 而不是 1，flex 参数只支持单个数字。

Flex

flex 定义了你的项目将如何沿主轴在可用空间中“填充”。空间会根据每个元素的 flex 属性进行分配。

在下面的示例中，红色、橙色和绿色视图都是容器视图的子视图，该容器设置了 flex: 1。红色视图使用了 flex: 1，橙色视图使用了 flex: 2，绿色视图使用了 flex: 3。1+2+3 = 6，这意味着红色视图会占用空间的 1/6，橙色视图占用 2/6，绿色视图占用 3/6。

Flex 方向

flexDirection 控制一个节点的子元素如何排列方向，这也称为主轴。交叉轴是垂直于主轴的轴，也就是换行时排列的方向。

• column（默认值）子元素从上到下排列。如果启用换行，下一行会从容器顶部第一个元素的右侧开始。

• row 子元素从左到右排列。如果启用换行，下一行会从容器左侧第一个元素的下方开始。

• column-reverse 子元素从下到上排列。如果启用换行，下一行会从容器底部第一个元素的右侧开始。

• row-reverse 子元素从右到左排列。如果启用换行，下一行会从容器右侧第一个元素的下方开始。

你可以在这里了解更多。

TypeScript

JavaScript

布局方向

布局的 direction 指定了子项和文本在层次中的排列方向。布局方向还会影响 start 和 end 指的边缘。默认情况下，React Native 使用 LTR（从左到右）的布局方向。在此模式下，start 指左边，end 指右边。

• LTR（默认值）文本和子项从左到右排列。对元素的 start 侧应用的 margin 和 padding 会被应用到左边。

• RTL 文本和子项从右到左排列。对元素的 start 侧应用的 margin 和 padding 会被应用到右边。

TypeScript

JavaScript

Justify Content

justifyContent 描述如何在容器的主轴上对齐子元素。例如，你可以用此属性在 flexDirection 设置为 row 的容器中水平居中子元素，或者在 flexDirection 设置为 column 的容器中垂直居中子元素。

• flex-start（默认值）将子元素对齐到容器主轴的起点。

• flex-end 将子元素对齐到容器主轴的终点。

• center 将子元素对齐到容器主轴的中心。

• space-between 在容器主轴上均匀分布子元素，剩余空间平均分配到子元素间。

• space-around 在容器主轴上均匀分布子元素，剩余空间平均分配到子元素周围。相比于 space-between，space-around 会使首个子元素开始处和最后一个子元素末尾处也有空间。

• space-evenly 在主轴上均匀分布子元素，且相邻子元素间、首端与第一个子元素之间、末端与最后一个子元素之间的空间全部相等。

你可以在这里了解更多。

TypeScript

JavaScript

Align Items

alignItems 描述了如何在容器的交叉轴上对齐子元素。它与 justifyContent 类似，但作用于交叉轴，而非主轴。

• stretch（默认值）拉伸容器内的子元素以匹配容器交叉轴的高度。

• flex-start 将容器内的子元素对齐到交叉轴的起点。

• flex-end 将容器内的子元素对齐到交叉轴的终点。

• center 将容器内的子元素对齐到交叉轴的中心。

• baseline 让容器内的子元素沿着共同的基线对齐。单独的子元素可以设置为父级的参考基线。

信息

stretch 需要子元素在次轴上没有固定的尺寸才会生效。在下面的示例中，设置 alignItems: stretch 不起作用，直到去掉子元素的 width: 50。

你可以在这里学习更多。

TypeScript

JavaScript

Align Self

alignSelf 和 alignItems 具有相同的选项和效果，但它不影响容器内所有子元素，而是用于单个子元素，改变其在父容器中的排列。alignSelf 会覆盖父容器通过 alignItems 设置的选项。

TypeScript

JavaScript

Align Content

alignContent 定义了多行内容沿交叉轴的分布。当使用 flexWrap 使项目换行到多行时，此属性才生效。

• flex-start（默认值）将换行行对齐至容器交叉轴的起点。

• flex-end 将换行行对齐至容器交叉轴的终点。

• stretch（web 版本 Yoga 的默认值）拉伸换行行以匹配容器交叉轴的高度。

• center 将换行行对齐至容器交叉轴的中心。

• space-between 在容器交叉轴上均匀分布换行行，剩余空间平均分配至行之间。

• space-around 在容器交叉轴上均匀分布换行行，剩余空间平均分配至行周围。容器两端的空间是行间空间的一半。

• space-evenly 在容器交叉轴上均匀分布换行行，所有空隙大小相等。

你可以在这里了解更多。

TypeScript

JavaScript

Flex 换行

flexWrap 属性设置在容器上，控制当子元素在主轴方向上溢出容器大小时的行为。默认情况下，子元素被强制放入一行（可能导致元素缩小）。如果允许换行，则项目会在需要时沿主轴换行成多行。

当换行时，可以使用 alignContent 指定行在容器中的摆放方式。了解更多这里。

TypeScript

JavaScript

Flex 基础、增长和缩小

• flexBasis 是一个轴独立的属性，用来设定项目沿主轴的默认尺寸。给子元素设置 flexBasis 类似于在父容器的 flexDirection: row 情况下设置宽度，或者在 flexDirection: column 情况下设置高度。flexBasis 决定了该元素在进行任何 flexGrow 和 flexShrink 计算前的初始尺寸。

• flexGrow 描述容器内剩余空间应如何沿主轴分配给其子元素。布局完子元素后，容器会根据子元素的 flexGrow 值对剩余空间进行分配。

  flexGrow 取任何大于等于 0 的浮点数，默认是 0。容器会根据子元素的 flexGrow 权重分配剩余空间。

• flexShrink 描述在子元素总尺寸超出容器主轴尺寸时，子元素应如何缩小。flexShrink 与 flexGrow 类似，当考虑溢出尺寸为负的剩余空间时，它代表了缩小的比例。这两个属性配合使用，实现元素的适当增长和缩小。

  flexShrink 取任何大于等于 0 的浮点数，默认是 0（网页上默认是 1）。容器会根据子元素的 flexShrink 权重缩小子元素。

你可以在这里了解更多。

TypeScript

JavaScript

行间距、列间距和间距

• rowGap 设置元素行之间的间隙（沟槽）大小。

• columnGap 设置元素列之间的间隙（沟槽）大小。

• gap 同时设置行和列之间的间隙大小，相当于 rowGap 和 columnGap 的简写。

你可以结合使用 flexWrap 和 alignContent 以及 gap，实现项目间的均匀间距。

TypeScript

JavaScript

宽度和高度

width 属性指定元素内容区的宽度。同样，height 属性指定元素内容区的高度。

width 和 height 可以采用以下值：

• auto（默认值）React Native 根据内容（子元素、文本或图片）计算元素的宽度/高度。

• pixels 以绝对像素值定义宽度/高度。根据组件的其他样式设置，这可能是节点的最终尺寸，也可能不是。

• percentage 以其父元素宽度或高度的百分比定义宽度或高度。

TypeScript

JavaScript

定位

元素的 position 类型定义了它如何相对于自身、父元素或包含块定位。

• relative（默认值）默认情况下，元素采用相对定位。意味着元素按照正常布局流排列，然后根据 top、right、bottom 和 left 值进行偏移。此偏移不会影响任何兄弟或父元素的位置。

• absolute 采用绝对定位时，元素不参与正常布局流。而是独立于兄弟元素进行布局。位置由 top、right、bottom 和 left 决定，这些值相对于包含块定位。

• static 采用静态定位时，元素按照正常布局流排列，忽略 top、right、bottom 和 left。此 position 也会导致元素不形成绝对定位子元素的包含块，除非存在某些其他样式（如 transform）。这允许绝对定位元素可以超越其父元素定位。注意，static 仅在新架构下可用。

TypeScript

JavaScript

包含块

元素的包含块是控制其位置和大小的祖先元素。 React Native 中包含块的工作方式与网页上的类似，但由于缺少某些网页功能，有所简化。

绝对定位元素的 top、right、bottom 和 left 值相对于其包含块。

百分比长度（例如：width: '50%' 或 padding: '10%'）应用于绝对定位元素时，将相对于包含块的尺寸计算。例如，如果包含块宽 100 点，则绝对定位元素的 width: 50% 会使其宽度为 50 点。

以下列表帮助你判断任一元素的包含块：

• 若元素的 position 类型是 relative 或 static，那么其包含块是其父元素。
• 若元素的 position 类型是 absolute，那么其包含块是最近的满足以下条件的祖先元素：
  • 其 position 类型非 static
  • 或者拥有 transform

深入学习

查看交互式的 yoga playground，帮助你更好地理解 flexbox。

我们已经覆盖了基础内容，但还有很多其他样式可用于布局。控制布局的完整属性列表，请参阅这里。

另外，你也可以看看 Wix 工程师的一些示例。