布局属性
有关这些属性的更详细示例，请参阅 Flexbox 布局页面。
示例
以下示例显示了不同的属性如何影响或塑造 React Native 布局。例如，您可以在更改 flexWrap 属性值的同时，尝试添加或删除 UI 中的方块。
- TypeScript
- JavaScript
参考
属性
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 的节点上，纵横比控制节点在交叉轴上的大小（如果未设置）。
- 在具有测量函数的节点上，纵横比的作用就像测量函数测量 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。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderEndWidth
当 direction 为 ltr 时，borderEndWidth 等同于 borderRightWidth。当 direction 为 rtl 时，borderEndWidth 等同于 borderLeftWidth。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderLeftWidth
borderLeftWidth 类似于 CSS 中的 border-left-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-left-width。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderRightWidth
borderRightWidth 类似于 CSS 中的 border-right-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-right-width。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderStartWidth
当 direction 为 ltr 时，borderStartWidth 等同于 borderLeftWidth。当 direction 为 rtl 时，borderStartWidth 等同于 borderRightWidth。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderTopWidth
borderTopWidth 类似于 CSS 中的 border-top-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-top-width。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
borderWidth
borderWidth 类似于 CSS 中的 border-width。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/border-width。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
bottom
bottom 是该组件下边缘的逻辑像素偏移量。
它的工作方式类似于 CSS 中的 bottom，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关 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。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
direction
direction 指定用户界面的方向流。默认值为 inherit，根节点的值除外，它将基于当前语言环境。有关更多详细信息，请参阅 https://www.yogalayout.dev/docs/styling/layout-direction。
| 类型 | 必需 | Platform |
|---|---|---|
| enum('inherit', 'ltr', 'rtl') | 否 | iOS |
display
display 设置此组件的显示类型。
它的工作方式类似于 CSS 中的 display，但仅支持 'flex'、'none' 和 'contents' 值。默认值为 flex。
| 类型 | 必需 |
|---|---|
| enum('none', 'flex', 'contents') | 否 |
end
当 direction 为 ltr 时，end 等同于 right。当 direction 为 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 中相同。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
flexBasis
flexBasis 是一种独立于轴的方式，用于提供项在主轴上的默认大小。设置子项的 flexBasis 类似于设置子项的 width（如果其父容器是具有 flexDirection: row 的容器）或设置子项的 height（如果其父容器是具有 flexDirection: column 的容器）。项的 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 值按权重分配任何剩余空间给其子项。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
flexShrink
flexShrink 描述了在子项的总大小溢出容器在主轴上的大小时，如何在主轴上缩小子项。flexShrink 与 flexGrow 非常相似，如果将任何溢出大小视为负的剩余空间，则可以以相同的方式进行思考。这两个属性结合使用效果很好，可以使子项根据需要进行增长和收缩。
flexShrink 接受任何浮点值 >= 0，其中 0 是默认值。容器将根据子项的 flexShrink 值按权重缩小其子项。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
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。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
height
height 设置此组件的高度。
它的工作方式类似于 CSS 中的 height，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/height。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
isolation
isolation 允许您形成一个堆叠上下文。此属性仅在新架构中可用。
有两个值
auto（默认）：不执行任何操作。isolate：形成堆叠上下文。
| 类型 | 必需 |
|---|---|
| enum('auto', 'isolate') | 否 |
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 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关 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
当 direction 为 ltr 时，marginEnd 等同于 marginRight。当 direction 为 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
当 direction 为 ltr 时，marginStart 等同于 marginLeft。当 direction 为 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 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/max-height。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
maxWidth
maxWidth 是该组件的最大宽度，单位为逻辑像素。
它的工作方式类似于 CSS 中的 max-width，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/max-width。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
minHeight
minHeight 是该组件的最小高度，单位为逻辑像素。
它的工作方式类似于 CSS 中的 min-height，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/min-height。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
minWidth
minWidth 是该组件的最小宽度，单位为逻辑像素。
它的工作方式类似于 CSS 中的 min-width，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关更多详细信息，请参阅 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
当 direction 为 ltr 时，paddingEnd 等同于 paddingRight。当 direction 为 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
当 direction 为 ltr 时，paddingStart 等同于 paddingLeft。当 direction 为 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
right 是该组件右边缘的逻辑像素偏移量。
它的工作方式类似于 CSS 中的 right，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关 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。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |
start
当 direction 为 ltr 时，start 等同于 left。当 direction 为 rtl 时，start 等同于 right。
此样式优先于 left、right 和 end 样式。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
top
top 是该组件上边缘的逻辑像素偏移量。
它的工作方式类似于 CSS 中的 top，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。
有关 top 如何影响布局的更多详细信息，请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/top。
| 类型 | 必需 |
|---|---|
| number, string | 否 |
width
width 设置此组件的宽度。
它的工作方式类似于 CSS 中的 width，但在 React Native 中，您必须使用点或百分比。不支持 ems 和其他单位。有关更多详细信息，请参阅 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 元素是彼此的同级元素才能按预期工作。
| 类型 | 必需 |
|---|---|
| 数字 | 否 |