跳到主要内容

使用 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 方向​

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

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

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

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

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

您可以在这里了解更多。

布局方向​

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

  • LTR (默认值) 文本和子组件从左到右布局。应用于元素 start 的 margin 和 padding 应用于左侧。

  • RTL 文本和子组件从右到左布局。应用于元素 start 的 margin 和 padding 应用于右侧。

Justify Content​

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

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

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

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

  • space-between 在容器主轴上均匀分隔子组件，并将剩余空间分配在子组件之间。

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

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

您可以在这里了解更多。

Align Items​

alignItems 描述如何在容器的交叉轴上对齐子组件。它与 justifyContent 非常相似，但不应用于主轴，而是应用于交叉轴。

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

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

  • flex-end 将容器的子组件对齐到容器交叉轴的终点。

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

  • baseline 将容器的子组件沿公共基线对齐。可以将单个子组件设置为其父组件的参考基线。

信息

为了使 stretch 生效，子组件在次轴上不能具有固定尺寸。在以下示例中，设置 alignItems: stretch 不起作用，除非从子组件中删除 width: 50。

您可以在这里了解更多。

Align Self​

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

Align Content​

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

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

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

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

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

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

  • space-around 在容器交叉轴上均匀分隔换行行，并将剩余空间分配在行周围。与项目之间的空间相比，容器的每一端都具有一半大小的空间。

  • space-evenly 在容器交叉轴上均匀分隔换行行，并将剩余空间分配在行周围。每个空间的大小都相同。

您可以在这里了解更多。

Flex Wrap​

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

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

Flex Basis、Grow 和 Shrink​

  • flexBasis 是一种轴独立的提供项目沿主轴默认大小的方式。如果子组件的父组件是 flexDirection: row 的容器，则设置子组件的 flexBasis 类似于设置该子组件的 width；如果父组件是 flexDirection: column 的容器，则设置子组件的 flexBasis 类似于设置该子组件的 height。项目的 flexBasis 是该项目的默认大小，即在执行任何 flexGrow 和 flexShrink 计算之前项目的大小。

  • flexGrow 描述容器内应沿主轴在其子组件之间分配多少空间。在布局其子组件后，容器将根据其子组件指定的 flex grow 值分配任何剩余空间。

    flexGrow 接受任何浮点值 >= 0，其中 0 为默认值。容器将根据子组件的 flexGrow 值加权，在其子组件之间分配任何剩余空间。

  • flexShrink 描述在子组件总大小溢出容器在主轴上的大小时，如何沿主轴缩小子组件。flexShrink 与 flexGrow 非常相似，如果将任何溢出大小视为负剩余空间，则可以以相同的方式考虑。这两个属性也可以很好地协同工作，允许子组件根据需要增长和缩小。

    flexShrink 接受任何浮点值 >= 0，其中 0 为默认值（在 Web 上，默认值为 1）。容器将根据子组件的 flexShrink 值加权来缩小其子组件。

您可以在这里了解更多。

Row Gap、Column Gap 和 Gap​

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

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

  • gap 设置行和列之间间隙（gutter）的大小。它是 rowGap 和 columnGap 的简写。

您可以将 flexWrap 和 alignContent 与 gap 一起使用，以在项目之间添加一致的间距。

宽度和高度​

width 属性指定元素内容区域的宽度。类似地，height 属性指定元素内容区域的高度。

width 和 height 都可以采用以下值

  • auto (默认值) React Native 根据元素的内容（无论是其他子组件、文本还是图像）计算元素的宽度/高度。

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

  • percentage 以父组件宽度或高度的百分比定义宽度或高度。

Position​

元素的 position 类型定义了它相对于自身、其父组件或其包含块的定位方式。

  • relative (默认值) 默认情况下，元素是相对定位的。这意味着元素根据布局的正常流程定位，然后根据 top、right、bottom 和 left 的值相对于该位置偏移。偏移不会影响任何兄弟元素或父元素的位置。

  • absolute 当绝对定位时，元素不参与正常的布局流程。相反，它独立于其兄弟元素布局。位置根据 top、right、bottom 和 left 值确定。这些值将相对于其包含块定位元素。

  • static 当静态定位时，元素根据布局的正常流程定位，并将忽略 top、right、bottom 和 left 值。此 position 也会导致元素不为其绝对后代形成包含块，除非存在一些其他覆盖样式属性（例如 transform）。这允许绝对元素定位到不是其父组件的元素。请注意，static 仅在新架构上可用。

包含块​

元素的包含块是一个祖先元素，它控制其位置和大小。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。

我们已经介绍了基础知识，但您可能还需要许多其他样式用于布局。控制布局的完整属性列表在此处记录。

此外，您可以查看 Wix Engineers 的一些示例。