跳到主要内容

布局属性

信息

有关这些属性的更详细示例可以在使用 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 的节点上,如果未设置,纵横比控制节点在交叉轴上的大小。
  • 在具有测量函数的节点上,纵横比的作用就像测量函数测量 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

当方向为 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

类型必需
number, string

boxSizing

boxSizing 定义了元素的各种尺寸属性(widthheightminWidthminHeight 等)是如何计算的。如果 boxSizingborder-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

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

此样式优先于 leftright 样式。

类型必需
number, string

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 计算之前项目的大小。

类型必需
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 描述了当子元素的总大小溢出容器主轴上的大小时,如何沿主轴收缩子元素。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)。

类型必需
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 中您必须使用点或百分比。不支持 em 和其他单位。更多详情请参阅 https://mdn.org.cn/en-US/docs/Web/CSS/height

类型必需
number, string

isolation

isolation 允许您形成一个堆叠上下文。此属性仅在新架构 (New Architecture) 中可用。

有两个值:

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

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

类型必需
number, string

margin

设置 margin 与同时设置 marginTopmarginLeftmarginBottommarginRight 具有相同的效果。更多详情请参阅 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 与同时设置 marginLeftmarginRight 具有相同的效果。

类型必需
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 与同时设置 marginTopmarginBottom 具有相同的效果。

类型必需
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 与同时设置 paddingToppaddingBottompaddingLeftpaddingRight 具有相同的效果。更多详情请参阅 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 类似于同时设置 paddingLeftpaddingRight

类型必需
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 类似于同时设置 paddingToppaddingBottom

类型必需
number, string

position

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

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

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

类型必需
数字

start

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

此样式优先于 leftrightend 样式。

类型必需
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 彼此相邻才能按预期工作。

类型必需
数字