跳到主要内容

布局属性

有关这些属性的更详细示例,请参阅使用 Flexbox 布局页面。

示例

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


参考

属性

alignContent

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

类型必需
枚举('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

类型必需
枚举('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

类型必需
枚举('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 的节点上,如果未设置,宽高比控制节点在交叉轴上的大小
  • 宽高比考虑最小/最大维度
类型必需
数字,字符串

borderBottomWidth

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

类型必需
数字

borderEndWidth

当方向为 ltr 时,borderEndWidth 等同于 borderRightWidth。当方向为 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

当方向为 ltr 时,borderStartWidth 等同于 borderLeftWidth。当方向为 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

类型必需
数字,字符串

boxSizing

boxSizing 定义了元素各种尺寸属性(width, height, minWidth, minHeight 等)的计算方式。如果 boxSizingborder-box,这些尺寸应用于元素的边框盒。如果是 content-box,则应用于元素的内容盒。默认值为 border-box。如果您想了解更多关于此属性的工作原理,web 文档是一个很好的信息来源。

类型必需
枚举('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

类型必需平台
枚举('inherit', 'ltr', 'rtl')iOS

display

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

它的工作方式类似于 CSS 中的 display,但仅支持“flex”、“none”和“contents”值。默认值为 flex

类型必需
枚举('none', 'flex', 'contents')

end

当方向为 ltr 时,end 等同于 right。当方向为 rtl 时,end 等同于 left

此样式优先于 leftright 样式。

类型必需
数字,字符串

flex

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

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

flex 为 0 时,组件根据 widthheight 进行尺寸调整,并且它不灵活。

flex 为 -1 时,组件通常根据 widthheight 进行尺寸调整。但是,如果空间不足,组件将收缩到其 minWidthminHeight

flexGrowflexShrinkflexBasis 的工作方式与 CSS 中相同。

类型必需
数字

flexBasis

flexBasis 是一种与轴无关的方式,用于提供沿主轴的项的默认大小。设置子项的 flexBasis 类似于设置该子项的 width(如果其父级是具有 flexDirection: row 的容器)或设置子项的 height(如果其父级是具有 flexDirection: column 的容器)。项的 flexBasis 是该项的默认大小,是在执行任何 flexGrowflexShrink 计算之前项的大小。

类型必需
数字,字符串

flexDirection

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

类型必需
枚举('row', 'row-reverse', 'column', 'column-reverse')

flexGrow

flexGrow 描述了容器内的任何空间应如何沿主轴在其子元素之间分配。布局子元素后,容器将根据其子元素指定的 flex 增长值分配任何剩余空间。

flexGrow 接受任何浮点值 >= 0,其中 0 为默认值。容器将根据子元素的 flexGrow 值权重分配任何剩余空间。

类型必需
数字

flexShrink

flexShrink 描述了在子元素的总大小溢出容器在主轴上的大小时,如何沿主轴收缩子元素。flexShrinkflexGrow 非常相似,如果任何溢出大小被认为是负剩余空间,则可以以相同的方式思考。这两个属性也通过允许子元素根据需要增长和收缩而协同工作。

flexShrink 接受任何浮点值 >= 0,默认值为 0。容器将根据子元素的 flexShrink 值权重收缩其子元素。

类型必需
数字

flexWrap

flexWrap 控制子元素在到达弹性容器末尾后是否可以换行。它的工作方式类似于 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)。

类型必需
枚举('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

类型必需
数字,字符串

isolation

isolation 允许您形成堆叠上下文。此属性仅在新架构可用

有两个值

  • auto(默认):不执行任何操作。
  • isolate:形成堆叠上下文。
类型必需
枚举('auto', 'isolate')

justifyContent

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

类型必需
枚举('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

类型必需
数字,字符串

margin

设置 margin 与设置 marginTopmarginLeftmarginBottommarginRight 的效果相同。有关更多详细信息,请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/margin

类型必需
数字,字符串

marginBottom

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

类型必需
数字,字符串

marginEnd

当方向为 ltr 时,marginEnd 等同于 marginRight。当方向为 rtl 时,marginEnd 等同于 marginLeft

类型必需
数字,字符串

marginHorizontal

设置 marginHorizontal 的效果与同时设置 marginLeftmarginRight 相同。

类型必需
数字,字符串

marginLeft

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

类型必需
数字,字符串

marginRight

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

类型必需
数字,字符串

marginStart

当方向为 ltr 时,marginStart 等同于 marginLeft。当方向为 rtl 时,marginStart 等同于 marginRight

类型必需
数字,字符串

marginTop

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

类型必需
数字,字符串

marginVertical

设置 marginVertical 的效果与同时设置 marginTopmarginBottom 相同。

类型必需
数字,字符串

maxHeight

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

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

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

类型必需
数字,字符串

maxWidth

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

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

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

类型必需
数字,字符串

minHeight

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

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

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

类型必需
数字,字符串

minWidth

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

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

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

类型必需
数字,字符串

overflow

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

类型必需
枚举('visible', 'hidden', 'scroll')

padding

设置 padding 与设置 paddingToppaddingBottompaddingLeftpaddingRight 的效果相同。有关更多详细信息,请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/padding

类型必需
数字,字符串

paddingBottom

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

类型必需
数字,字符串

paddingEnd

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

类型必需
数字,字符串

paddingHorizontal

设置 paddingHorizontal 的效果与同时设置 paddingLeftpaddingRight 相同。

类型必需
数字,字符串

paddingLeft

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

类型必需
数字,字符串

paddingRight

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

类型必需
数字,字符串

paddingStart

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

类型必需
数字,字符串

paddingTop

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

类型必需
数字,字符串

paddingVertical

设置 paddingVertical 的效果与同时设置 paddingToppaddingBottom 相同。

类型必需
数字,字符串

position

React Native 中的 position 类似于常规 CSS,但所有元素默认设置为 relative

relative 将根据布局的正常流定位元素。内边距(topbottomleftright)将相对于此布局进行偏移。

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

static 将根据布局的正常流定位元素。内边距将不起作用。static 元素不会为其绝对子元素形成包含块。

有关更多信息,请参阅使用 Flexbox 布局文档。此外,Yoga 文档详细说明了 position 在 React Native 和 CSS 之间的差异。

类型必需
枚举('absolute', 'relative', 'static')

right 是用于抵消此组件右边缘的逻辑像素数。

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

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

类型必需
数字,字符串

rowGap

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

类型必需
数字

start

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

此样式优先于 leftrightend 样式。

类型必需
数字,字符串

top

top 是用于抵消此组件顶部边缘的逻辑像素数。

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

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

类型必需
数字,字符串

width

width 设置此组件的宽度。

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

类型必需
数字,字符串

zIndex

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

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

在 iOS 上,zIndex 可能要求 Views 互为兄弟关系才能按预期工作。

类型必需
数字