使用 Flexbox 布局

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

通常，您会结合使用 flexDirection、alignItems 和 justifyContent 来实现正确的布局。

注意

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

弹性

flex 将定义您的项目如何沿主轴**“填充”**可用空间。空间将根据每个元素的 flex 属性进行划分。

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

弹性方向

flexDirection 控制节点子组件的布局方向。这也被称为主轴。交叉轴是垂直于主轴的轴，或者说是换行线排列的轴。

• column (默认值) 将子组件从上到下对齐。如果启用了换行，则下一行将从容器顶部第一个项目的右侧开始。

• row 将子组件从左到右对齐。如果启用了换行，则下一行将从容器左侧第一个项目的下方开始。

• column-reverse 将子组件从下到上对齐。如果启用了换行，则下一行将从容器底部第一个项目的右侧开始。

• row-reverse 将子组件从右到左对齐。如果启用了换行，则下一行将从容器右侧第一个项目的下方开始。

您可以在此处了解更多信息。

TypeScript

JavaScript

布局方向

布局direction 指定层级中子组件和文本的布局方向。布局方向还会影响 start 和 end 所指的边缘。默认情况下，React Native 以 LTR 布局方向进行布局。在此模式下，start 指左侧，end 指右侧。

• LTR (默认值) 文本和子组件从左到右布局。应用于元素开头的边距和填充应用于左侧。

• RTL 文本和子组件从右到左布局。应用于元素开头的边距和填充应用于右侧。

TypeScript

JavaScript

对齐内容

justifyContent 描述了如何在其容器的主轴内对齐子组件。例如，您可以使用此属性在 flexDirection 设置为 row 的容器中水平居中子组件，或在 flexDirection 设置为 column 的容器中垂直居中子组件。

• flex-start(默认值) 将容器的子组件对齐到容器主轴的起始位置。

• flex-end 将容器的子组件对齐到容器主轴的结束位置。

• center 将容器的子组件对齐到容器主轴的中心位置。

• space-between 均匀分布子组件，使其跨容器主轴，将剩余空间分布在子组件之间。

• space-around 均匀分布子组件，使其跨容器主轴，将剩余空间分布在子组件周围。与 space-between 相比，使用 space-around 会导致空间分布到第一个子组件的开头和最后一个子组件的结尾。

• space-evenly 沿主轴在对齐容器内均匀分布子项。每对相邻项目之间、主起始边缘与第一个项目之间以及主结束边缘与最后一个项目之间的间距完全相同。

您可以在此处了解更多信息。

TypeScript

JavaScript

对齐项目

alignItems 描述了如何沿其容器的交叉轴对齐子项。它与 justifyContent 非常相似，但 alignItems 适用于交叉轴，而不是主轴。

• stretch (默认值) 拉伸容器的子组件以匹配容器交叉轴的 height。

• flex-start 将容器的子组件对齐到容器交叉轴的起始位置。

• flex-end 将容器的子组件对齐到容器交叉轴的结束位置。

• center 将容器的子组件对齐到容器交叉轴的中心位置。

• baseline 沿共同基线对齐容器的子项。可以设置单个子项作为其父项的参考基线。

信息

要使 stretch 生效，子项在次轴上不能有固定尺寸。在以下示例中，设置 alignItems: stretch 在从子项中删除 width: 50 之前不起作用。

您可以在此处了解更多信息。

TypeScript

JavaScript

对齐自身

alignSelf 具有与 alignItems 相同的选项和效果，但它不是影响容器内的子组件，而是可以应用于单个子组件以更改其在其父组件中的对齐方式。alignSelf 会覆盖父组件使用 alignItems 设置的任何选项。

TypeScript

JavaScript

对齐内容

alignContent 定义了沿交叉轴的线条分布。这仅在项目使用 flexWrap 换行到多行时才有效。

• flex-start (默认值) 将换行对齐到容器交叉轴的起始位置。

• flex-end 将换行对齐到容器交叉轴的结束位置。

• stretch (在使用 Yoga 网页版时的默认值) 拉伸换行以匹配容器交叉轴的高度。

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

• space-between 均匀分布换行，使其跨容器交叉轴，将剩余空间分布在行之间。

• space-around 均匀分布换行，使其跨容器交叉轴，将剩余空间分布在行周围。容器的两端与项目之间的空间相比，都有半个大小的空间。

• space-evenly 均匀分布换行，使其跨容器交叉轴，将剩余空间分布在行周围。每个空间大小相同。

您可以在此处了解更多信息。

TypeScript

JavaScript

弹性换行

flexWrap 属性在容器上设置，它控制当子组件沿主轴溢出容器大小时发生的情况。默认情况下，子组件被强制为单行（这可能会缩小元素）。如果允许换行，则必要时将项目沿主轴换行到多行。

换行时，可以使用 alignContent 指定行在容器中的位置。在此处了解更多信息。

TypeScript

JavaScript

弹性基准、增长和收缩

• flexBasis 是一种与轴无关的方式，用于提供项目沿主轴的默认大小。设置子项的 flexBasis 类似于设置该子项的 width（如果其父项是 flexDirection: row 的容器）或设置子项的 height（如果其父项是 flexDirection: column 的容器）。项目的 flexBasis 是该项目的默认大小，是在执行任何 flexGrow 和 flexShrink 计算之前的大小。

• 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）。这允许 absolute 元素定位到非其父级的元素。请注意，**static 仅在新的架构中可用**。

TypeScript

JavaScript

包含块

元素的包含块是一个祖先元素，它控制其位置和大小。React Native 中包含块的工作方式与它们在 Web 上的工作方式非常相似，但由于缺少某些 Web 特性而进行了一些简化。

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

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

以下列表将帮助您确定任何给定元素的包含块：

• 如果该元素的 position 类型为 relative 或 static，则其包含块是其父级。
• 如果该元素的 position 类型为 absolute，则其包含块是满足以下条件之一的最近祖先：
  • 它的 position 类型不是 static
  • 它具有 transform

深入了解

查看交互式yoga playground，您可以使用它更好地了解 flexbox。

我们已经涵盖了基础知识，但您可能需要许多其他样式用于布局。控制布局的完整属性列表此处有详细说明。

此外，您还可以查看Wix 工程师的一些示例。