跳转到主要内容

布局属性

关于这些属性的更详细示例，请参见 Flexbox 布局 页面。

示例​

以下示例展示了不同的属性如何影响或塑造 React Native 布局。例如，您可以尝试在更改 flexWrap 属性的值时，从 UI 中添加或删除正方形。

参考

属性​

alignContent​

alignContent 控制行在交叉轴方向上的对齐方式，覆盖父级的 alignContent。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/align-content。

类型必需
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')否

alignItems​

alignItems 使子组件在交叉轴方向上对齐。例如，如果子组件是垂直流动的，则 alignItems 控制它们如何水平对齐。它类似于 CSS 中的 align-items（默认值：stretch）。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/align-items。

类型必需
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')否

alignSelf​

alignSelf 控制子组件在交叉轴方向上的对齐方式，覆盖父级的 alignItems。它类似于 CSS 中的 align-self（默认值：auto）。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/align-self。

类型必需
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')否

aspectRatio​

纵横比控制节点未定义尺寸的大小。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/aspect-ratio。

  • 在设置了宽度/高度的节点上，纵横比控制未设置尺寸的大小
  • 在设置了 flex basis 的节点上，如果未设置交叉轴尺寸，则纵横比控制该尺寸
  • 在具有 measure 函数的节点上，纵横比的工作方式就像 measure 函数测量 flex basis 一样
  • 在具有 flex grow/shrink 的节点上，如果未设置交叉轴尺寸，则纵横比控制该尺寸
  • 纵横比考虑最小/最大尺寸
类型必需
number, string否

borderBottomWidth​

borderBottomWidth 的工作方式类似于 CSS 中的 border-bottom-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-bottom-width。

类型必需
number否

borderEndWidth​

当方向为 ltr 时，borderEndWidth 等效于 borderRightWidth。当方向为 rtl 时，borderEndWidth 等效于 borderLeftWidth。

类型必需
number否

borderLeftWidth​

borderLeftWidth 的工作方式类似于 CSS 中的 border-left-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-left-width。

类型必需
number否

borderRightWidth​

borderRightWidth 的工作方式类似于 CSS 中的 border-right-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-right-width。

类型必需
number否

borderStartWidth​

当方向为 ltr 时，borderStartWidth 等效于 borderLeftWidth。当方向为 rtl 时，borderStartWidth 等效于 borderRightWidth。

类型必需
number否

borderTopWidth​

borderTopWidth 的工作方式类似于 CSS 中的 border-top-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-top-width。

类型必需
number否

borderWidth​

borderWidth 的工作方式类似于 CSS 中的 border-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-width。

类型必需
number否

bottom​

bottom 是此组件底部边缘的逻辑像素偏移量。

它的工作方式与 CSS 中的 bottom 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关 bottom 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/bottom。

类型必需
number, string否

boxSizing​

boxSizing 定义了如何计算元素的各种尺寸属性（width、height、minWidth、minHeight 等）。如果 boxSizing 为 border-box，则这些尺寸应用于元素的边框框。如果为 content-box，则应用于元素的内容框。默认值为 border-box。如果您想了解有关此属性如何工作的更多信息，Web 文档 是一个很好的信息来源。

类型必需
enum('border-box', 'content-box')否

columnGap​

columnGap 的工作方式类似于 CSS 中的 column-gap。React Native 中仅支持像素单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/column-gap。

类型必需
number否

direction​

direction 指定用户界面的方向流。默认值为 inherit，但根节点将具有基于当前区域设置的值。有关更多详细信息，请参阅 https://www.yogalayout.dev/docs/styling/layout-direction。

类型必需平台
enum('inherit', 'ltr', 'rtl')否iOS

display​

display 设置此组件的显示类型。

它的工作方式与 CSS 中的 display 类似，但仅支持 'flex' 和 'none'。'flex' 是默认值。

类型必需
enum('none', 'flex')否

end​

当方向为 ltr 时，end 等效于 right。当方向为 rtl 时，end 等效于 left。

此样式优先于 left 和 right 样式。

类型必需
number, string否

flex​

在 React Native 中，flex 的工作方式与 CSS 中不同。flex 是一个数字而不是字符串，它根据 Yoga 布局引擎工作。

当 flex 为正数时，它使组件具有弹性，并且其尺寸将与其 flex 值成比例。因此，flex 设置为 2 的组件将占用 flex 设置为 1 的组件的两倍空间。flex: <positive number> 等同于 flexGrow: <positive number>, flexShrink: 1, flexBasis: 0。

当 flex 为 0 时，组件会根据 width 和 height 设置尺寸，并且它是非弹性的。

当 flex 为 -1 时，组件通常根据 width 和 height 设置尺寸。但是，如果空间不足，组件将缩小到其 minWidth 和 minHeight。

flexGrow、flexShrink 和 flexBasis 的工作方式与 CSS 中相同。

类型必需
number否

flexBasis​

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

类型必需
number, string否

flexDirection​

flexDirection 控制容器的子组件朝哪个方向流动。row 从左到右，column 从上到下，您或许可以猜到其他两个方向的作用。它的工作方式类似于 CSS 中的 flex-direction，但默认值为 column。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/flex-direction。

类型必需
enum('row', 'row-reverse', 'column', 'column-reverse')否

flexGrow​

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

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

类型必需
number否

flexShrink​

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

flexShrink 接受任何浮点值 >= 0，默认值为 0。容器将根据子组件的 flexShrink 值加权收缩其子组件。

类型必需
number否

flexWrap​

flexWrap 控制子组件在到达 flex 容器末尾后是否可以换行。它的工作方式类似于 CSS 中的 flex-wrap（默认值：nowrap）。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/flex-wrap。请注意，它不再与 alignItems: stretch（默认值）一起使用，因此您可能需要使用 alignItems: flex-start 例如（重大更改详细信息：https://github.com/facebook/react-native/releases/tag/v0.28.0）。

类型必需
enum('wrap', 'nowrap', 'wrap-reverse')否

gap​

gap 的工作方式类似于 CSS 中的 gap。React Native 中仅支持像素单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/gap。

类型必需
number否

height​

height 设置此组件的高度。

它的工作方式与 CSS 中的 height 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/height。

类型必需
number, string否

justifyContent​

justifyContent 使子组件在主轴方向上对齐。例如，如果子组件是垂直流动的，则 justifyContent 控制它们如何垂直对齐。它的工作方式类似于 CSS 中的 justify-content（默认值：flex-start）。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/justify-content。

类型必需
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')否

left​

left 是此组件左边缘的逻辑像素偏移量。

它的工作方式与 CSS 中的 left 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关 left 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/left。

类型必需
number, string否

margin​

设置 margin 与分别设置 marginTop、marginLeft、marginBottom 和 marginRight 具有相同的效果。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin。

类型必需
number, string否

marginBottom​

marginBottom 的工作方式类似于 CSS 中的 margin-bottom。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin-bottom。

类型必需
number, string否

marginEnd​

当方向为 ltr 时，marginEnd 等效于 marginRight。当方向为 rtl 时，marginEnd 等效于 marginLeft。

类型必需
number, string否

marginHorizontal​

设置 marginHorizontal 与同时设置 marginLeft 和 marginRight 具有相同的效果。

类型必需
number, string否

marginLeft​

marginLeft 的工作方式类似于 CSS 中的 margin-left。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin-left。

类型必需
number, string否

marginRight​

marginRight 的工作方式类似于 CSS 中的 margin-right。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin-right。

类型必需
number, string否

marginStart​

当方向为 ltr 时，marginStart 等效于 marginLeft。当方向为 rtl 时，marginStart 等效于 marginRight。

类型必需
number, string否

marginTop​

marginTop 的工作方式类似于 CSS 中的 margin-top。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin-top。

类型必需
number, string否

marginVertical​

设置 marginVertical 与同时设置 marginTop 和 marginBottom 具有相同的效果。

类型必需
number, string否

maxHeight​

maxHeight 是此组件的最大高度，以逻辑像素为单位。

它的工作方式与 CSS 中的 max-height 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/max-height。

类型必需
number, string否

maxWidth​

maxWidth 是此组件的最大宽度，以逻辑像素为单位。

它的工作方式与 CSS 中的 max-width 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/max-width。

类型必需
number, string否

minHeight​

minHeight 是此组件的最小高度，以逻辑像素为单位。

它的工作方式与 CSS 中的 min-height 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/min-height。

类型必需
number, string否

minWidth​

minWidth 是此组件的最小宽度，以逻辑像素为单位。

它的工作方式与 CSS 中的 min-width 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/min-width。

类型必需
number, string否

overflow​

overflow 控制子组件的测量和显示方式。overflow: hidden 会裁剪视图，而 overflow: scroll 会使视图独立于其父级的主轴进行测量。它的工作方式类似于 CSS 中的 overflow（默认值：visible）。有关更多详细信息，请参阅 https://mdn.org.cn/en/docs/Web/CSS/overflow。

类型必需
enum('visible', 'hidden', 'scroll')否

padding​

设置 padding 与分别设置 paddingTop、paddingBottom、paddingLeft 和 paddingRight 具有相同的效果。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding。

类型必需
number, string否

paddingBottom​

paddingBottom 的工作方式类似于 CSS 中的 padding-bottom。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding-bottom。

类型必需
number, string否

paddingEnd​

当方向为 ltr 时，paddingEnd 等效于 paddingRight。当方向为 rtl 时，paddingEnd 等效于 paddingLeft。

类型必需
number, string否

paddingHorizontal​

设置 paddingHorizontal 类似于同时设置 paddingLeft 和 paddingRight。

类型必需
number, string否

paddingLeft​

paddingLeft 的工作方式类似于 CSS 中的 padding-left。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding-left。

类型必需
number, string否

paddingRight​

paddingRight 的工作方式类似于 CSS 中的 padding-right。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding-right。

类型必需
number, string否

paddingStart​

当方向为 ltr 时，paddingStart 等效于 paddingLeft。当方向为 rtl 时，paddingStart 等效于 paddingRight。

类型必需
number, string否

paddingTop​

paddingTop 的工作方式类似于 CSS 中的 padding-top。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding-top。

类型必需
number, ,string否

paddingVertical​

设置 paddingVertical 类似于同时设置 paddingTop 和 paddingBottom。

类型必需
number, string否

position​

React Native 中的 position 类似于 常规 CSS，但默认情况下所有内容都设置为 relative。

relative 将根据布局的正常流程定位元素。插值（top、bottom、left、right）将相对于此布局偏移。

absolute 将元素从布局的正常流程中移除。插值将相对于其包含块偏移。

static 将根据布局的正常流程定位元素。插值将不起作用。static 元素不会为绝对后代形成包含块。

有关更多信息，请参阅Flexbox 布局文档。此外，Yoga 文档 提供了有关 position 在 React Native 和 CSS 之间有何不同的更多详细信息。

类型必需
enum('absolute', 'relative', 'static')否

right 是此组件右边缘的逻辑像素偏移量。

它的工作方式与 CSS 中的 right 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关 right 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/right。

类型必需
number, string否

rowGap​

rowGap 的工作方式类似于 CSS 中的 row-gap。React Native 中仅支持像素单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/row-gap。

类型必需
number否

start​

当方向为 ltr 时，start 等效于 left。当方向为 rtl 时，start 等效于 right。

此样式优先于 left、right 和 end 样式。

类型必需
number, string否

top​

top 是此组件顶部边缘的逻辑像素偏移量。

它的工作方式与 CSS 中的 top 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。

有关 top 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/top。

类型必需
number, string否

width​

width 设置此组件的宽度。

它的工作方式与 CSS 中的 width 类似，但在 React Native 中，您必须使用点或百分比。不支持 em 和其他单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/width。

类型必需
number, string否

zIndex​

zIndex 控制哪些组件显示在其他组件之上。通常，您不使用 zIndex。组件根据它们在文档树中的顺序渲染，因此后面的组件会绘制在前面的组件之上。如果您有动画或自定义模态界面，并且不希望出现此行为，则 zIndex 可能会很有用。

它的工作方式类似于 CSS z-index 属性 - zIndex 较大的组件将渲染在顶部。将 z 方向想象成从手机指向您的眼球。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/z-index。

在 iOS 上，zIndex 可能需要 View 成为彼此的兄弟节点才能按预期工作。

类型必需
number否