跳到主要内容

布局属性

有关这些属性的更详细示例,请参阅使用 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 中您必须使用点或百分比。不支持 em 和其他单位。

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

类型必填
数字, 字符串

boxSizing

boxSizing 定义了元素的各种尺寸属性(widthheightminWidthminHeight 等)是如何计算的。如果 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 控制子元素是否可以在达到 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)。

类型必填
枚举('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 中您必须使用点或百分比。不支持 em 和其他单位。有关更多详细信息,请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/height

类型必填
数字, 字符串

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 中您必须使用点或百分比。不支持 em 和其他单位。

有关 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 中您必须使用点或百分比。不支持 em 和其他单位。

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

类型必填
数字, 字符串

maxWidth

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

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

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

类型必填
数字, 字符串

minHeight

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

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

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

类型必填
数字, 字符串

minWidth

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

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

有关更多详细信息,请参阅 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 中您必须使用点或百分比。不支持 em 和其他单位。

有关 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 中您必须使用点或百分比。不支持 em 和其他单位。

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

类型必填
数字, 字符串

width

width 设置此组件的宽度。

它的工作方式与 CSS 中的 width 类似,但在 React Native 中您必须使用点或百分比。不支持 em 和其他单位。有关更多详细信息,请参阅 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 互为兄弟元素才能按预期工作。

类型必填
数字