布局属性

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

关于这些属性的更详细示例，请参阅使用 Flexbox 进行布局页面。

示例

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

TypeScript

JavaScript

---

参考

属性

alignContent

alignContent 控制行在交叉方向上的对齐方式，会覆盖父级的 alignContent 属性。

详见 MDN CSS 参考文档。

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	No

---

alignItems

alignItems 控制子项在交叉方向上的对齐方式。例如，当子项垂直排列时，alignItems 控制它们在水平方向的对齐行为（类似于 CSS 的 align-items，默认值：stretch）。

详见 MDN CSS 参考文档。

Type	Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

alignSelf

alignSelf 控制单个子项在交叉方向的对齐方式，会覆盖父级的 alignItems 设置（类似于 CSS 的 align-self，默认值：auto）。

详见 MDN CSS 参考文档。

Type	Required
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	No

---

aspectRatio

宽高比（aspectRatio）控制节点未定义方向的尺寸。

• 在设置了宽度/高度的节点上，宽高比控制未设置方向的尺寸

• 在设置了 flex basis 的节点上，宽高比控制未设置时节点在交叉轴的尺寸

• 在拥有测量函数的节点上，宽高比作用如同测量函数测量 flex basis

• 在设置了 flex grow/shrink 的节点上，宽高比控制未设置时节点在交叉轴的尺寸

• 宽高比会考虑最小/最大尺寸限制

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

borderBottomWidth

borderBottomWidth 作用类似 CSS 的 border-bottom-width。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

borderEndWidth

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

Type	Required
number	No

---

borderLeftWidth

borderLeftWidth 作用类似 CSS 的 border-left-width。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

borderRightWidth

borderRightWidth 作用类似 CSS 的 border-right-width。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

borderStartWidth

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

Type	Required
number	No

---

borderTopWidth

borderTopWidth 作用类似 CSS 的 border-top-width。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

borderWidth

borderWidth 作用类似 CSS 的 border-width。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

bottom

bottom 表示组件底部边缘的偏移量（以逻辑像素为单位）。

它的作用类似于 CSS 中的 bottom，但在 React Native 中必须使用点（points）或百分比作为单位，不支持 em 等其他单位。

关于 bottom 如何影响布局的详细说明，请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

boxSizing

boxSizing 定义了如何计算元素的各种尺寸属性（如 width、height、minWidth、minHeight 等）。当 boxSizing 设为 border-box 时，这些尺寸适用于元素的边框盒；当设为 content-box 时，则适用于内容盒。默认值为 border-box。如需了解该属性的工作原理，Web 文档是很好的参考资源。

Type	Required
enum('border-box', 'content-box')	No

---

columnGap

columnGap 作用类似 CSS 的 column-gap。在 React Native 中仅支持像素单位。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

direction

direction 指定用户界面的方向流。默认值为 inherit（根节点会根据当前语言环境自动设置）。

详见 MDN CSS 参考文档。

Type	Required
enum('inherit', 'ltr', 'rtl')	No

---

display

display 设置组件的显示类型。

它的作用类似于 CSS 中的 display，但仅支持 'flex'、'none' 和 'contents' 这三个值，默认值为 flex。

Type	Required
enum('none', 'flex', 'contents')	No

---

end

当方向为 ltr（从左到右）时，end 等同于 right；当方向为 rtl（从右到左）时，end 等同于 left。

该样式优先级高于 left 和 right 样式。

Type	Required
number, string	No

---

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 中相同。

Type	Required
number	No

---

flexBasis

flexBasis 是一种独立于轴线的方式，用于设置项目沿主轴的默认尺寸。设置子项的 flexBasis 类似于：当父容器使用 flexDirection: row 时设置该子项的 width；当父容器使用 flexDirection: column 时设置该子项的 height。项目的 flexBasis 是其默认尺寸，即在任何 flexGrow 和 flexShrink 计算发生前的初始尺寸。

Type	Required
number, string	No

---

flexDirection

flexDirection 控制容器子项的排列方向。row 表示从左到右排列，column 表示从上到下排列，另外两个值的含义也不难猜出。它的作用类似于 CSS 中的 flex-direction，但默认值为 column。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
enum('row', 'row-reverse', 'column', 'column-reverse')	No

---

flexGrow

flexGrow 描述容器内剩余空间应如何沿主轴在其子项之间分配。容器完成子项布局后，会根据子项指定的 flex grow 值分配剩余空间。

flexGrow 接受任何 ≥0 的浮点数值（默认值为 0）。容器将根据子项的 flexGrow 值按权重分配剩余空间。

Type	Required
number	No

---

flexShrink

flexShrink 描述当子项在主轴上的总尺寸超出容器大小时，应如何沿主轴收缩子项。flexShrink 与 flexGrow 非常相似——若将超出尺寸视为负剩余空间，两者原理相同。这两个属性协同工作，使子项能够根据需要扩展或收缩。

flexShrink 接受任何 ≥0 的浮点数值（默认值为 0）。容器将根据子项的 flexShrink 值按权重收缩子项。

Type	Required
number	No

---

flexWrap

flexWrap 控制子项在到达 flex 容器末端后是否可以换行。它的作用类似于 CSS 中的 flex-wrap（默认值为 nowrap）。

注意：它不再与 alignItems: stretch (默认值) 兼容，因此你可能需要改用 alignItems: flex-start (破坏性变更详情: https://github.com/facebook/react-native/releases/tag/v0.28.0).

更多细节请参阅 MDN CSS 参考文档。

Type	Required
enum('wrap', 'nowrap', 'wrap-reverse')	No

---

gap

gap 的作用类似于 CSS 中的 gap。在 React Native 中仅支持像素单位。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number	No

---

height

height 设置此组件的高度。

它的作用类似于 CSS 中的 height，但在 React Native 中必须使用点（points）或百分比作为单位，不支持 em 等其他单位。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

inset

备注

inset 仅在新架构中可用。

设置 inset 的效果等同于同时设置 top、bottom、right 和 left 属性。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetBlock

备注

insetBlock 仅在新架构中可用。

等同于 top 和 bottom。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetBlockEnd

备注

insetBlockEnd 仅在新架构中可用。

等同于 bottom。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetBlockStart

备注

insetBlockStart 仅在新架构中可用。

等同于 top。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetInline

备注

insetInline 仅在新架构中可用。

等同于 right 和 left。

更多细节请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetInlineEnd

备注

insetInlineEnd 仅在新架构中可用。

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

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

insetInlineStart

备注

insetInlineStart 仅在新架构中可用

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

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

isolation

备注

isolation 仅在新架构中可用

isolation 用于创建层叠上下文。

可选值：

• auto（默认）：不执行任何操作

• isolate：创建堆叠上下文

Type	Required
enum('auto', 'isolate')	No

---

justifyContent

justifyContent 控制子元素在主轴方向的对齐方式。例如当子元素垂直排列时，justifyContent 控制其垂直对齐行为。其作用类似于 CSS 中的 justify-content（默认值：flex-start）。

详见 MDN CSS 参考文档。

Type	Required
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	No

---

left

left 表示组件左边缘的逻辑像素偏移量。

其功能类似于 CSS 中的 left，但在 React Native 中必须使用点(pt)或百分比(%)作为单位，不支持 em 等其他单位。

关于 left 如何影响布局的详细说明，请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

margin

设置 margin 等效于同时设置 marginTop、marginLeft、marginBottom 和 marginRight。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginBottom

marginBottom 的作用类似于 CSS 中的 margin-bottom。详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginBlock

等效于 marginVertical。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginBlockEnd

等效于 marginBottom。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginBlockStart

等效于 marginTop。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginEnd

当布局方向为 ltr 时，marginEnd 等同于 marginRight；当方向为 rtl 时，marginEnd 等同于 marginLeft。

Type	Required
number, string	No

---

marginHorizontal

设置 marginHorizontal 的效果等同于同时设置 marginLeft 和 marginRight。

Type	Required
number, string	No

---

marginInline

等效于 marginHorizontal。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginInlineEnd

当方向为 ltr 时，marginInlineEnd 等效于 marginEnd（即 marginRight）；当方向为 rtl 时，marginInlineEnd 等效于 marginEnd（即 marginLeft）。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginInlineStart

当方向为 ltr 时，marginInlineStart 等效于 marginStart（即 marginLeft）。当方向为 rtl 时，marginInlineStart 等效于 marginStart（即 marginRight）。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginLeft

marginLeft 作用类似 CSS 的 margin-left。详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginRight

marginRight 作用类似 CSS 的 margin-right。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginStart

当布局方向为 ltr 时，marginStart 等同于 marginLeft；当方向为 rtl 时，marginStart 等同于 marginRight。

Type	Required
number, string	No

---

marginTop

marginTop 作用类似 CSS 的 margin-top。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

marginVertical

设置 marginVertical 的效果等同于同时设置 marginTop 和 marginBottom。

Type	Required
number, string	No

---

maxHeight

maxHeight 表示组件的最大高度（逻辑像素单位）。

其功能类似于 CSS 中的 max-height，但在 React Native 中必须使用点(pt)或百分比(%)作为单位，不支持 em 等其他单位。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

maxWidth

maxWidth 表示组件的最大宽度（逻辑像素单位）。

其功能类似于 CSS 中的 max-width，但在 React Native 中必须使用点(pt)或百分比(%)作为单位，不支持 em 等其他单位。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

minHeight

minHeight 表示组件的最小高度，单位为逻辑像素。

其功能类似于 CSS 中的 min-height，但在 React Native 中必须使用点（points）或百分比作为单位，不支持 em 等其他单位。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

minWidth

minWidth 表示组件的最小宽度，单位为逻辑像素。

其功能类似于 CSS 中的 min-width，但在 React Native 中必须使用点（points）或百分比作为单位，不支持 em 等其他单位。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

overflow

overflow 控制子项的测量和显示方式。overflow: hidden 会裁剪视图，而 overflow: scroll 会使视图的测量独立于父级主轴（作用类似 CSS 的 overflow，默认值：visible）。

详见 MDN CSS 参考文档。

Type	Required
enum('visible', 'hidden', 'scroll')	No

---

padding

设置 padding 的效果等同于同时设置 paddingTop、paddingBottom、paddingLeft 和 paddingRight。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingBottom

paddingBottom 作用类似 CSS 的 padding-bottom。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingBlock

等效于 paddingVertical。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingBlockEnd

等效于 paddingBottom。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingBlockStart

等效于 paddingTop。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingEnd

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

Type	Required
number, string	No

---

paddingHorizontal

设置 paddingHorizontal 等同于同时设置 paddingLeft 和 paddingRight。

Type	Required
number, string	No

---

paddingInline

等效于 paddingHorizontal。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingInlineEnd

当方向为 ltr 时，paddingInlineEnd 等效于 paddingEnd（即 paddingRight）。当方向为 rtl 时，paddingInlineEnd 等效于 paddingEnd（即 paddingLeft）。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingInlineStart

当方向为 ltr 时，paddingInlineStart 等效于 paddingStart（即 paddingLeft）。当方向为 rtl 时，paddingInlineStart 等效于 paddingStart（即 paddingRight）。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingLeft

paddingLeft 作用类似 CSS 的 padding-left。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingRight

paddingRight 作用类似 CSS 的 padding-right。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingStart

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

Type	Required
number, string	No

---

paddingTop

paddingTop 作用类似 CSS 的 padding-top。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

paddingVertical

设置 paddingVertical 等同于同时设置 paddingTop 和 paddingBottom。

Type	Required
number, string	No

---

position

在 React Native 中，position 的用法与常规 CSS 类似，但所有元素的默认值均为 relative。

relative 会根据布局的正常流定位元素。内嵌边距（top、bottom、left、right）将相对于此布局进行偏移。

absolute 将元素移出布局的正常流。内嵌边距将相对于其包含块进行偏移。

static 会根据布局的正常流定位元素。内嵌边距不会产生任何效果。 static 元素不会为绝对定位的后代元素形成包含块。

更多信息请参阅弹性盒布局文档。此外，Yoga 文档详细说明了 React Native 与 CSS 中 position 属性的差异。

Type	Required
enum('absolute', 'relative', 'static')	No

---

right

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

其作用类似于 CSS 中的 right，但在 React Native 中必须使用点(pt)或百分比(%)单位，不支持 em 等其他单位。

关于 right 如何影响布局的详细说明，请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

rowGap

rowGap 作用类似 CSS 的 row-gap。在 React Native 中仅支持像素单位。

详见 MDN CSS 参考文档。

Type	Required
number	No

---

start

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

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

Type	Required
number, string	No

---

top

top 表示此组件上边缘的逻辑像素偏移量。

其作用类似于 CSS 中的 top，但在 React Native 中必须使用点(pt)或百分比(%)单位，不支持 em 等其他单位。

关于 top 如何影响布局的详细说明，请参阅 MDN CSS 参考文档。

Type	Required
number, string	No

---

width

width 设置此组件的宽度。

它的作用类似于 CSS 中的 width，但在 React Native 中必须使用点（points）或百分比作为单位，不支持 em 等其他单位。

详见 MDN CSS 参考文档。

Type	Required
number, string	No

---

zIndex

zIndex 控制组件的层叠顺序。通常不需要使用 zIndex，组件默认按照文档树顺序渲染（后渲染的覆盖先渲染的）。在动画或自定义模态界面等需要打破默认层叠行为的场景中，zIndex 可能有用。

它的作用类似 CSS 的 z-index 属性——zIndex 值较大的组件会渲染在上层。可以将 z 方向想象为从手机屏幕指向你的眼球。

在 iOS 上，zIndex 可能需要同级 View 组件才能达到预期效果。

详见 MDN CSS 参考文档。

Type	Required
number	No