跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

布局属性

更多关于这些属性的详细示例可以在Flexbox 布局页面上找到。

示例

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


文档

属性

alignContent

alignContent控制行在交叉轴上的对齐方式,会覆盖父级元素设置的alignContent属性。访问 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/align-items

类型必需
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')

alignSelf

alignSelf 控制子元素在纵向上的对齐方式,会覆盖父元素的 alignItems 属性。其作用类似于 CSS 中的align-self(默认值

)。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-self

类型必需
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')

aspectRatio

长宽比控制了节点未定义维度的尺寸。详情请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

  • 对于设置了宽度/高度的节点,长宽比控制着未设置尺寸的一边大小。
  • 对于设置了 flex 值的节点,若未设置其在交叉轴方向的尺寸,长宽比决定着该节点沿交叉轴的尺寸。
  • 若节点使用了测量函数,长宽比将视同测量函数测量了 flex 值。
  • 对于设置了 flex grow/shrink 的节点,若其在交叉轴方向的尺寸未设置,长宽比将决定该尺寸。
  • 长宽比同时考虑了最小/最大尺寸约束。
类型必需
number, string

borderBottomWidth

borderBottomWidth 与 CSS 中的 border-bottom-width 属性作用相同。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-width

类型必需
number

borderEndWidth

当方向为 ltr 时,borderEndWidth 等同于 borderRightWidth。当方向为 rtl 时,borderEndWidth 等同于 borderLeftWidth

类型必需
number

borderLeftWidth

borderLeftWidth 的作用类似于 CSS 中的 border-left-width。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-left-width

类型必需
number

borderRightWidth

borderRightWidth 的作用与 CSS 中的 border-right-width 属性类似。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-right-width

类型必需
number

borderStartWidth

当方向为 ltr 时,borderStartWidth 相当于 borderLeftWidth。当方向为 rtl 时,borderStartWidth 相当于 borderRightWidth

类型必需
number

borderTopWidth

borderTopWidth 的作用类似于 CSS 中的 border-top-width。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-width

类型必需
number

borderWidth

borderWidth 的作用类似于 CSS 中的 border-width。详情请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width

类型必需
number

bottom

bottom 是指将此组件底部边缘向下偏移的逻辑像素数。

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

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

类型必需
number, string

columnGap

columnGap 的作用类似于 CSS 中的 column-gap。在 React Native 中仅支持像素单位。有关更多详细信息,请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap。

类型必需
number

direction

direction指定了用户界面的阅读顺序。ltr表示 left to right,即从左往右阅读。反之rtl为从右往左阅读。默认值为inherit,但根节点的值会根据用户所在地的不同而不同。访问 https://yogalayout.com/docs/layout-direction 来进一步了解。

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

display

display设置组件的显示类型。可用于元素的显示和隐藏。

它的表现和 CSS 上的display类似,但目前只支持'flex'和'none'两个值。默认值是'flex'。

类型必需
enum('none', 'flex')

end

direction设置为ltr时,end等同于right。当direction设置为rtlend等同于left

此样式的优先级高于leftright

类型必需
number, string

flex

在 React Native 中flex的表现和 CSS 有些区别。flex在 RN 中只能为整数值,其具体表现请参考yoga布局引擎的文档,其地址为 https://github.com/facebook/yoga

flex为一个正整数时,组件尺寸会具有弹性,并根据具体的 flex 值来按比例分配。比如两个组件在同一个父容器中,一个flex为 2,另一个flex为 1,则两者的尺寸比为 2:1。 flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

flex为 0 时,组件尺寸由widthheight决定,此时不再具有弹性。

flex为-1 时,组件尺寸一般还是由widthheight决定。但是当空间不够时,组件尺寸会收缩到minWidthminHeight所设定的值。

flexGrowflexShrinkflexBasis和在 CSS 上表现一致。

类型必需
number

flexBasis

flexBasis 是一种与轴无关的提供项目沿主轴默认大小的方式。设置一个子元素的 flexBasis 与其父元素为 flexDirection: row 的容器时设置该子元素的 width 类似,或者与其父元素为 flexDirection: column 的容器时设置该子元素的 height 类似。一个项目的 flexBasis 是该项目的默认大小,即在执行任何 flexGrowflexShrink 计算之前项目的大小。

类型必需
number, string

flexDirection

flexDirection 控制容器内子元素的排列方向。row 为从左到右排列,column 为从上到下排列,你可以猜测其他两种方式的效果。它的作用类似于 CSS 中的 flex-direction 属性,只不过默认值是 column。 访问 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction 来进一步了解。

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

flexGrow

在设置 flexGrow 属性时,它描述了在主轴方向上容器中的剩余空间应该如何分配给子元素。在布局子元素后,容器将根据子元素的 flexGrow 值按比例分配剩余空间。 flexGrow 接受任意大于等于 0 的浮点数,默认值为 0。容器中剩余的空间将按子元素的 flexGrow 值加权分配。

类型必需
number

flexShrink

flexShrink 描述了在子元素的总大小超出主轴方向容器大小时,如何沿着主轴缩小子元素。flexShrinkflexGrow 非常相似,如果将任何溢出的大小视为负剩余空间,可以以相同的方式考虑它。这两个属性一起使用效果也很好,允许子元素根据需要进行扩展和收缩。

flexShrink 接受任何大于等于 0 的浮点值,其中 0 是默认值。容器会根据子元素的 flexShrink 值加权缩小其子元素。

类型必需
number

flexWrap

flexWrap 控制子元素在到达弹性容器末端后是否可以换行。它的工作原理类似于 CSS 中的 flex-wrap(默认值:nowrap)。访问 https://developer.mozilla.org/zh-CN/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://developer.mozilla.org/en-US/docs/Web/CSS/gap

类型必需
number

height

height用于设置组件的高度。

它的表现和 CSS 上的height类似, but in React Native 只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。 访问 https://developer.mozilla.org/en-US/docs/Web/CSS/height 来进一步了解。

类型必需
number, string

justifyContent

justifyContent 用于在主方向上对齐子元素。例如,如果子元素垂直流动,justifyContent 控制它们如何垂直对齐。它的作用类似于 CSS 中的 justify-content(默认值:flex-start)。 访问 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 来进一步了解。

类型必需
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')

left

left值是指将本组件定位到距离左边多少个逻辑像素(左边的定义取决于position属性)。

它的表现和 CSS 上的left类似, but in React Native 只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

想了解 left 属性对布局的影响,请访问 https://developer.mozilla.org/zh-CN/docs/Web/CSS/left 查看更多细节。

类型必需
number, string

margin

设置margin相当于同时设置marginTopmarginLeftmarginBottom以及marginRight。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/margin 来进一步了解。

类型必需
number, string

marginBottom

marginBottom和 CSS 上的margin-bottom表现一致。访问 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/margin-left 来进一步了解。

类型必需
number, string

marginRight

marginRight和 CSS 上的margin-right表现一致。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right 来进一步了解。

类型必需
number, string

marginStart

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

类型必需
number, string

marginTop

marginTop和 CSS 上的margin-top表现一致。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top 来进一步了解。

类型必需
number, string

marginVertical

设置marginVertical相当于同时设置marginTopmarginBottom

类型必需
number, string

maxHeight

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

它的表现和 CSS 上的max-height类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height 来进一步了解。

类型必需
number, string

maxWidth

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

它的表现和 CSS 上的max-width类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width 来进一步了解。

类型必需
number, string

minHeight

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

它的表现和 CSS 上的min-height类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/min-height 来进一步了解。

类型必需
number, string

minWidth

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

它的表现和 CSS 上的min-width类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width 来进一步了解。

类型必需
number, string

overflow

overflow 控制子元素的测量和显示方式。overflow: hidden 会导致视图被裁剪,而 overflow: scroll 会导致视图独立于其父元素的主轴进行测量。它的工作原理类似于 CSS 中的 overflow(默认值:visible)。 访问 https://developer.mozilla.org/en/docs/Web/CSS/overflow 来进一步了解。

类型必需
enum('visible', 'hidden', 'scroll')

padding

设置padding相当于同时设置paddingToppaddingBottompaddingLeft以及paddingRight。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/padding 来进一步了解。

类型必需
number, string

paddingBottom

paddingBottom和 CSS 上的padding-bottom表现一致。访问 https://developer.mozilla.org/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://developer.mozilla.org/en-US/docs/Web/CSS/padding-left 来进一步了解。

类型必需
number, string

paddingRight

paddingRight和 CSS 上的padding-right表现一致。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right 来进一步了解。

类型必需
number, string

paddingStart

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

类型必需
number, string

paddingTop

paddingTop和 CSS 上的padding-top表现一致。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top 来进一步了解。

类型必需
number, string

paddingVertical

设置paddingVertical相当于同时设置paddingToppaddingBottom

类型必需
number, string

position

在 React Native 中,position与常规 CSS 类似,但默认情况下所有元素都设置为relative,因此absolute定位始终是相对于父元素的。

如果您想要使用特定数量的逻辑像素相对于其父元素来定位子元素,请将子元素设置为具有absolute位置。

如果您想要将子元素相对于不是其父元素的对象进行定位,请不要为此使用样式。请使用组件树。

有关 React Native 和 CSS 之间position差异的更多详细信息,请参见 https://github.com/facebook/yoga

类型必需
enum('absolute', 'relative')

right值是指将本组件定位到距离右边多少个逻辑像素(右边的定义取决于position属性)。

它的表现和 CSS 上的right类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/right 来进一步了解。

类型必需
number, string

rowGap

rowGap 的功能类似于 CSS 中的 row-gap。React Native 仅支持像素单位。有关更多详细信息,请查看 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

类型必需
number

start

direction设置为ltr时,start等同于left。当direction设置为rtlstart等同于right

此样式的优先级高于leftrightend

类型必需
number, string

top

top值是指将本组件定位到距离顶部多少个逻辑像素(顶部的定义取决于position属性)。

它的表现和 CSS 上的top类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。

访问 https://developer.mozilla.org/en-US/docs/Web/CSS/top 来进一步了解。

类型必需
number, string

width

width设置组件的宽度。

它的表现和 CSS 上的width类似,但是在 React Native 上只能使用逻辑像素值(数字单位)或百分比,而不能使用 em 或是任何其他单位。 访问 https://developer.mozilla.org/en-US/docs/Web/CSS/width 来进一步了解。

类型必需
number, string

zIndex

zIndex控制着组件的堆叠覆盖顺序。多数情况下你不会用到此样式。默认情况下组件按其在文档树的顺序依次渲染,所以在代码结构上靠后的组件会覆盖前面的组件(如果它们在布局上有重叠的部分)。有时候在写一些动画或者自定义的模态窗口时,你可能会需要设置zIndex样式来改变层叠覆盖顺序。

它的表现和 CSS 上的z-index一致——zIndex大的在上面。这里面的z意味着三维空间中的z轴,你可以想象成垂直于手机屏幕指向你的眼睛的坐标轴。访问 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index 来进一步了解。

在 iOS 上,使用zIndex可能需要View彼此为兄弟节点才能生效。

类型必需
number