使用 Flexbox 布局
组件可以使用 Flexbox 算法指定其子元素的布局。Flexbox 旨在在不同屏幕尺寸上提供一致的布局。
通常你会结合使用 flexDirection、alignItems 和 justifyContent 来实现正确的布局。
Flexbox 在 React Native 中的工作方式与 Web 上的 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 Direction
flexDirection 控制节点子元素的布局方向。这也被称为主轴。交叉轴是垂直于主轴的轴，或者是换行所在的轴。
-
column(默认值) 从上到下对齐子元素。如果启用了换行，则下一行将从容器顶部第一个元素的右侧开始。 -
row从左到右对齐子元素。如果启用了换行，则下一行将从容器左侧第一个元素的下方开始。 -
column-reverse从下到上对齐子元素。如果启用了换行，则下一行将从容器底部第一个元素的右侧开始。 -
row-reverse从右到左对齐子元素。如果启用了换行，则下一行将从容器右侧第一个元素的下方开始。
你可以在这里了解更多。
- TypeScript
- JavaScript
Layout Direction
布局 direction 指定层次结构中子元素和文本的布局方向。布局方向还影响 start 和 end 指代的边缘。默认情况下，React Native 使用 LTR 布局方向。在此模式下，start 指左侧，end 指右侧。
-
LTR(默认值) 文本和子元素从左到右布局。应用于元素起始位置的 margin 和 padding 将应用于左侧。 -
RTL文本和子元素从右到左布局。应用于元素起始位置的 margin 和 padding 将应用于右侧。
- 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 生效，子元素在次要轴上不能有固定尺寸。在下面的示例中，直到从子元素中移除 width: 50 之前，设置 alignItems: stretch 没有任何效果。
您可以在 这里 了解更多。
- TypeScript
- JavaScript
自身对齐
alignSelf 具有与 alignItems 相同的选项和效果，但它不是影响容器内的子元素，而是可以将此属性应用于单个子元素以更改其在父元素内的对齐方式。alignSelf 会覆盖父元素通过 alignItems 设置的任何选项。
- TypeScript
- JavaScript
内容对齐
alignContent 定义行沿交叉轴的分布方式。仅当使用 flexWrap 将项目换行到多行时，此属性才生效。
-
flex-start(默认值) 将换行后的行对齐到容器交叉轴的起点。 -
flex-end将换行后的行对齐到容器交叉轴的终点。 -
stretch(在 Web 上使用 Yoga 时的默认值) 拉伸换行后的行以匹配容器交叉轴的高度。 -
center将换行后的行对齐到容器交叉轴的中心。 -
space-between沿容器交叉轴均匀分布换行后的行，将剩余空间分布在这些行之间。 -
space-around沿容器交叉轴均匀分布换行后的行，将剩余空间分布在这些行周围。容器两端的空间大小是项目之间空间的一半。 -
space-evenly沿容器交叉轴均匀分布换行后的行，将剩余空间分布在这些行周围。每个空间的大小相同。
您可以 在此处 了解更多。
- TypeScript
- JavaScript
Flex 换行
flexWrap 属性设置在容器上，它控制当子元素沿主轴溢出容器尺寸时会发生什么。默认情况下，子元素被强制放入单行（这可能会缩小元素）。如果允许换行，则在需要时沿主轴将项目换行到多行。
换行时，可以使用 alignContent 来指定行在容器中的放置方式。 了解更多。
- TypeScript
- JavaScript
Flex Basis、Grow 和 Shrink
-
flexBasis是一种与轴无关的方式，用于提供项目沿主轴的默认尺寸。设置子元素的flexBasis类似于设置该子元素的width（如果其父容器是flexDirection: row的容器）或设置子元素的height（如果其父容器是flexDirection: column的容器）。项目的flexBasis是该项目的默认尺寸，即在执行任何flexGrow和flexShrink计算之前的项目尺寸。 -
flexGrow描述了容器内多少空间应沿主轴分配给其子元素。在布局其子元素后，容器将根据其子元素指定的 flex grow 值分配任何剩余空间。flexGrow接受任何 >= 0 的浮点值，默认值为 0。容器将根据子元素的flexGrow值加权分配任何剩余空间。 -
flexShrink描述了在子元素的总尺寸沿主轴溢出容器尺寸的情况下，如何沿主轴缩小子元素。flexShrink与flexGrow非常相似，如果任何溢出尺寸被视为负剩余空间，则可以以相同的方式思考。这两个属性也配合得很好，允许子元素根据需要增长和缩小。flexShrink接受任何 >= 0 的浮点值，默认值为 0（在 Web 上，默认值为 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，则其包含块是满足以下任一条件的最近祖先元素：
- 它具有 static 以外的 position 类型
- 它具有 transform
深入了解
查看交互式 yoga playground，你可以用它来更好地理解 flexbox。
我们已经涵盖了基础知识，但布局可能还需要许多其他样式。控制布局的 props 完整列表记录在 这里。
此外，你可以查看来自 Wix Engineers 的一些示例。