布局属性
有关这些属性的更详细示例,请参阅使用 Flexbox 布局页面。
示例
以下示例展示了不同的属性如何影响或塑造 React Native 布局。例如,您可以尝试从 UI 中添加或删除方块,同时更改 flexWrap
属性的值。
- TypeScript
- JavaScript
参考
属性
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
等)的计算方式。如果 boxSizing
是 border-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
。
此样式优先于 left
和 right
样式。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
flex
在 React Native 中,flex
的工作方式与 CSS 不同。flex
是一个数字而不是字符串,并且它根据 Yoga 布局引擎工作。
当 flex
为正数时,它使组件具有弹性,并且其大小将与其 flex 值成比例。因此,一个 flex
设置为 2 的组件将占用一个 flex
设置为 1 的组件的两倍空间。flex: <正数>
等同于 flexGrow: <正数>, flexShrink: 1, flexBasis: 0
。
当 flex
为 0 时,组件根据 width
和 height
进行尺寸调整,并且它不灵活。
当 flex
为 -1 时,组件通常根据 width
和 height
进行尺寸调整。但是,如果空间不足,组件将收缩到其 minWidth
和 minHeight
。
flexGrow
、flexShrink
和 flexBasis
的工作方式与 CSS 中相同。
类型 | 必需 |
---|---|
数字 | 否 |
flexBasis
flexBasis
是一种与轴无关的方式,用于提供沿主轴的项的默认大小。设置子项的 flexBasis
类似于设置该子项的 width
(如果其父级是具有 flexDirection: row
的容器)或设置子项的 height
(如果其父级是具有 flexDirection: column
的容器)。项的 flexBasis
是该项的默认大小,是在执行任何 flexGrow
和 flexShrink
计算之前项的大小。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
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
描述了在子元素的总大小溢出容器在主轴上的大小时,如何沿主轴收缩子元素。flexShrink
与 flexGrow
非常相似,如果任何溢出大小被认为是负剩余空间,则可以以相同的方式思考。这两个属性也通过允许子元素根据需要增长和收缩而协同工作。
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
与设置 marginTop
、marginLeft
、marginBottom
和 marginRight
的效果相同。有关更多详细信息,请参阅 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
的效果与同时设置 marginLeft
和 marginRight
相同。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
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
的效果与同时设置 marginTop
和 marginBottom
相同。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
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
与设置 paddingTop
、paddingBottom
、paddingLeft
和 paddingRight
的效果相同。有关更多详细信息,请参阅 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
的效果与同时设置 paddingLeft
和 paddingRight
相同。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
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
的效果与同时设置 paddingTop
和 paddingBottom
相同。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
position
React Native 中的 position
类似于常规 CSS,但所有元素默认设置为 relative
。
relative
将根据布局的正常流定位元素。内边距(top
、bottom
、left
、right
)将相对于此布局进行偏移。
absolute
将元素从布局的正常流中取出。内边距将相对于其包含块进行偏移。
static
将根据布局的正常流定位元素。内边距将不起作用。static
元素不会为其绝对子元素形成包含块。
有关更多信息,请参阅使用 Flexbox 布局文档。此外,Yoga 文档详细说明了 position
在 React Native 和 CSS 之间的差异。
类型 | 必需 |
---|---|
枚举('absolute', 'relative', 'static') | 否 |
right
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
。
此样式优先于 left
、right
和 end
样式。
类型 | 必需 |
---|---|
数字,字符串 | 否 |
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
可能要求 View
s 互为兄弟关系才能按预期工作。
类型 | 必需 |
---|---|
数字 | 否 |