布局属性
有关这些属性的更详细示例可以在 使用 Flexbox 进行布局 页面上找到。
¥More detailed examples about those properties can be found on the Layout with Flexbox page.
示例
¥Example
以下示例展示了不同的属性如何影响或塑造 React Native 布局。例如，你可以尝试在更改属性 flexWrap 的值时在 UI 中添加或删除方块。
¥The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property flexWrap.
- TypeScript
- JavaScript
参考
¥Reference
属性
¥Props
alignContent
alignContent 控制行在横向方向上的对齐方式，覆盖父级的 alignContent。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/align-content。
¥alignContent controls how rows align in the cross direction, overriding the alignContent of the parent. See https://web.nodejs.cn/en-US/docs/Web/CSS/align-content for more details.
| 类型 | 必需的 |
|---|---|
| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | 不 |
alignItems
alignItems 在横向方向上对齐子项。例如，如果子项垂直流动，alignItems 控制它们水平对齐的方式。它的工作方式类似于 CSS 中的 align-items（默认值：stretch）。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/align-items。
¥alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS (default: stretch). See https://web.nodejs.cn/en-US/docs/Web/CSS/align-items for more details.
| 类型 | 必需的 |
|---|---|
| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | 不 |
alignSelf
alignSelf 控制子项如何在横向上对齐，覆盖父项的 alignItems。它的工作方式类似于 CSS 中的 align-self（默认值：自动）。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/align-self。
¥alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS (default: auto). See https://web.nodejs.cn/en-US/docs/Web/CSS/align-self for more details.
| 类型 | 必需的 |
|---|---|
| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | 不 |
aspectRatio
纵横比控制节点未定义尺寸的大小。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/aspect-ratio。
¥Aspect ratio controls the size of the undefined dimension of a node. See https://web.nodejs.cn/en-US/docs/Web/CSS/aspect-ratio for more details.
-
在具有设置宽度/高度的节点上，长宽比控制未设置尺寸的大小
¥On a node with a set width/height, aspect ratio controls the size of the unset dimension
-
在设置了 Flex 基础的节点上，如果未设置，纵横比将控制节点在横轴上的大小
¥On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-
在具有测量函数的节点上，纵横比的工作原理就像测量函数测量弹性基础一样
¥On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-
在具有弹性增长/收缩的节点上，如果未设置，纵横比控制横轴上节点的大小
¥On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-
纵横比考虑最小/最大尺寸
¥Aspect ratio takes min/max dimensions into account
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
borderBottomWidth
borderBottomWidth 在 CSS 中的作用类似于 border-bottom-width。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/border-bottom-width。
¥borderBottomWidth works like border-bottom-width in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/border-bottom-width for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderEndWidth
当方向为 ltr 时，borderEndWidth 相当于 borderRightWidth。当方向为 rtl 时，borderEndWidth 相当于 borderLeftWidth。
¥When direction is ltr, borderEndWidth is equivalent to borderRightWidth. When direction is rtl, borderEndWidth is equivalent to borderLeftWidth.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderLeftWidth
borderLeftWidth 在 CSS 中的作用类似于 border-left-width。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/border-left-width。
¥borderLeftWidth works like border-left-width in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/border-left-width for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderRightWidth
borderRightWidth 在 CSS 中的作用类似于 border-right-width。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/border-right-width。
¥borderRightWidth works like border-right-width in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/border-right-width for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderStartWidth
当方向为 ltr 时，borderStartWidth 相当于 borderLeftWidth。当方向为 rtl 时，borderStartWidth 相当于 borderRightWidth。
¥When direction is ltr, borderStartWidth is equivalent to borderLeftWidth. When direction is rtl, borderStartWidth is equivalent to borderRightWidth.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderTopWidth
borderTopWidth 在 CSS 中的作用类似于 border-top-width。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/border-top-width。
¥borderTopWidth works like border-top-width in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/border-top-width for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
borderWidth
borderWidth 在 CSS 中的作用类似于 border-width。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/border-width。
¥borderWidth works like border-width in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/border-width for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
bottom
bottom 是偏移该组件底部边缘的逻辑像素数。
¥bottom is the number of logical pixels to offset the bottom edge of this component.
它的工作方式与 CSS 中的 bottom 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to bottom in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
有关 bottom 如何影响布局的更多详细信息，请参阅 https://web.nodejs.cn/en-US/docs/Web/CSS/bottom。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/bottom for more details of how bottom affects layout.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
boxSizing
boxSizing 定义如何计算元素的各种尺寸属性（width、height、minWidth、minHeight 等）。如果 boxSizing 是 border-box，则这些大小适用于元素的边框。如果是 content-box，则它们适用于元素的内容框。默认值为 border-box。如果你想了解有关此 prop 的工作原理的更多信息，网络文档 是一个很好的信息来源。
¥boxSizing defines how the element's various sizing props (width, height, minWidth, minHeight, etc.) are computed. If boxSizing is border-box, these sizes apply to the border box of the element. If it is content-box, they apply to the content box of the element. The default value is border-box. The web documentation is a good source of information if you wish to learn more about how this prop works.
| 类型 | 必需的 |
|---|---|
| enum('border-box', 'content-box') | 不 |
columnGap
columnGap 在 CSS 中的作用类似于 column-gap。React Native 仅支持像素单位。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/column-gap。
¥columnGap works like column-gap in CSS. Only pixel units are supported in React Native. See https://web.nodejs.cn/en-US/docs/Web/CSS/column-gap for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
direction
direction 指定用户界面的定向流。默认值为 inherit，根节点除外，根节点的值基于当前区域设置。详细信息请参见 https://www.yogalayout.dev/docs/styling/layout-direction。
¥direction specifies the directional flow of the user interface. The default is inherit, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details.
| 类型 | 必需的 | Platform |
|---|---|---|
| enum('inherit', 'ltr', 'rtl') | 不 | iOS |
display
display 设置该组件的显示类型。
¥display sets the display type of this component.
它的工作方式与 CSS 中的 display 类似，但仅支持 'flex'、'none' 和 'contents' 这三个值。默认为 flex。
¥It works similarly to display in CSS but only supports the values 'flex', 'none', and 'contents'. The default is flex.
| 类型 | 必需的 |
|---|---|
| enum('none', 'flex', 'contents') | 不 |
end
当方向为 ltr 时，end 相当于 right。当方向为 rtl 时，end 相当于 left。
¥When the direction is ltr, end is equivalent to right. When the direction is rtl, end is equivalent to left.
此样式优先于 left 和 right 样式。
¥This style takes precedence over the left and right styles.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
flex
在 React Native flex 中，其工作方式与在 CSS 中的工作方式不同。flex 是一个数字而不是字符串，它根据 Yoga 布局引擎工作。
¥In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga layout engine.
当 flex 为正数时，它使组件变得灵活，并且其大小将与其 flex 值成正比。因此，flex 设置为 2 的组件将占用 flex 设置为 1 的组件两倍的空间。flex: <positive number> 等于 flexGrow: <positive number>, flexShrink: 1, flexBasis: 0。
¥When flex is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1. flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.
当 flex 为 0 时，组件根据 width 和 height 调整大小，不灵活。
¥When flex is 0, the component is sized according to width and height, and it is inflexible.
当 flex 为 -1 时，组件通常根据 width 和 height 调整尺寸。但是，如果没有足够的空间，组件将缩小到 minWidth 和 minHeight。
¥When flex is -1, the component is normally sized according to width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.
flexGrow、flexShrink 和 flexBasis 的工作方式与 CSS 中相同。
¥flexGrow, flexShrink, and flexBasis work the same as in CSS.
| 类型 | 必需的 |
|---|---|
| number | 不 |
flexBasis
flexBasis 是一种与轴无关的方式，提供项目沿主轴的默认大小。设置子级的 flexBasis 类似于如果其父级是具有 flexDirection: row 的容器则设置该子级的 width，或者如果其父级是具有 flexDirection: column 的容器则设置子级的 height。项目的 flexBasis 是该项目的默认尺寸，即执行任何 flexGrow 和 flexShrink 计算之前的项目尺寸。
¥flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
flexDirection
flexDirection 控制容器子容器的前进方向。row 从左到右，column 从上到下，你也许能猜到另外两个做什么。它的工作方式类似于 CSS 中的 flex-direction，但默认值为 column。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/flex-direction。
¥flexDirection controls which directions children of a container go. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do. It works like flex-direction in CSS, except the default is column. See https://web.nodejs.cn/en-US/docs/Web/CSS/flex-direction for more details.
| 类型 | 必需的 |
|---|---|
| enum('row', 'row-reverse', 'column', 'column-reverse') | 不 |
flexGrow
flexGrow 描述了容器内的任何空间应如何沿主轴分布在其子级之间。布置其子级后，容器将根据其子级指定的 Flex Growth 值分配任何剩余空间。
¥flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
flexGrow 接受任何 >= 0 的浮点值，其中 0 是默认值。容器将根据子级的 flexGrow 值在其子级之间分配任何剩余空间。
¥flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.
| 类型 | 必需的 |
|---|---|
| number | 不 |
flexShrink
flexShrink 描述了在子项总大小超出主轴上容器大小的情况下，如何沿主轴收缩子项。flexShrink 与 flexGrow 非常相似，如果任何溢出的大小被认为是负剩余空间，则可以以相同的方式进行思考。这两个属性也可以很好地协同工作，让子级根据需要成长和缩小。
¥flexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
flexShrink 接受任何 >= 0 的浮点值，其中 0 是默认值。容器将根据子项的 flexShrink 值加权缩小其子项。
¥flexShrink accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s flexShrink values.
| 类型 | 必需的 |
|---|---|
| number | 不 |
flexWrap
flexWrap 控制子级在到达弹性容器末端后是否可以环绕。它的工作方式类似于 CSS 中的 flex-wrap（默认值：nowrap）。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/flex-wrap。请注意，它不再适用于 alignItems: stretch（默认值），因此你可能需要使用 alignItems: flex-start（重大更改详细信息：https://github.com/facebook/react-native/releases/tag/v0.28.0).
¥flexWrap controls whether children can wrap around after they hit the end of a flex container. It works like flex-wrap in CSS (default: nowrap). See https://web.nodejs.cn/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with alignItems: stretch (the default), so you may want to use alignItems: flex-start for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
| 类型 | 必需的 |
|---|---|
| enum('wrap', 'nowrap', 'wrap-reverse') | 不 |
gap
gap 在 CSS 中的作用类似于 gap。React Native 仅支持像素单位。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/gap。
¥gap works like gap in CSS. Only pixel units are supported in React Native. See https://web.nodejs.cn/en-US/docs/Web/CSS/gap for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
height
height 设置该组件的高度。
¥height sets the height of this component.
它的工作方式与 CSS 中的 height 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/height。
¥It works similarly to height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://web.nodejs.cn/en-US/docs/Web/CSS/height for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
isolation
isolation 允许你创建 堆叠上下文。此属性仅适用于 新架构。
¥isolation lets you form a stacking context. This prop is only available on the New Architecture.
有两个值：
¥There are two values:
-
auto（默认）：不执行任何操作。¥
auto(default): Does nothing. -
isolate：形成堆叠上下文。¥
isolate: Forms a stacking context.
| 类型 | 必需的 |
|---|---|
| enum('auto', 'isolate') | 不 |
justifyContent
justifyContent 将子项与主方向对齐。例如，如果子项垂直流动，justifyContent 控制它们垂直对齐的方式。它的工作方式类似于 CSS 中的 justify-content（默认值：flex-start）。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/justify-content。
¥justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://web.nodejs.cn/en-US/docs/Web/CSS/justify-content for more details.
| 类型 | 必需的 |
|---|---|
| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | 不 |
left
left 是偏移该组件左边缘的逻辑像素数。
¥left is the number of logical pixels to offset the left edge of this component.
它的工作方式与 CSS 中的 left 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to left in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
有关 left 如何影响布局的更多详细信息，请参阅 https://web.nodejs.cn/en-US/docs/Web/CSS/left。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/left for more details of how left affects layout.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
margin
设置 margin 与设置 marginTop、marginLeft、marginBottom 和 marginRight 具有相同的效果。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/margin。
¥Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight. See https://web.nodejs.cn/en-US/docs/Web/CSS/margin for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginBottom
marginBottom 在 CSS 中的作用类似于 margin-bottom。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/margin-bottom。
¥marginBottom works like margin-bottom in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/margin-bottom for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginEnd
当方向为 ltr 时，marginEnd 相当于 marginRight。当方向为 rtl 时，marginEnd 相当于 marginLeft。
¥When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginHorizontal
设置 marginHorizontal 与设置 marginLeft 和 marginRight 具有相同的效果。
¥Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginLeft
marginLeft 在 CSS 中的作用类似于 margin-left。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/margin-left。
¥marginLeft works like margin-left in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/margin-left for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginRight
marginRight 在 CSS 中的作用类似于 margin-right。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/margin-right。
¥marginRight works like margin-right in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/margin-right for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginStart
当方向为 ltr 时，marginStart 相当于 marginLeft。当方向为 rtl 时，marginStart 相当于 marginRight。
¥When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginTop
marginTop 在 CSS 中的作用类似于 margin-top。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/margin-top。
¥marginTop works like margin-top in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/margin-top for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
marginVertical
设置 marginVertical 与设置 marginTop 和 marginBottom 具有相同的效果。
¥Setting marginVertical has the same effect as setting both marginTop and marginBottom.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
maxHeight
maxHeight 是该组件的最大高度（以逻辑像素为单位）。
¥maxHeight is the maximum height for this component, in logical pixels.
它的工作方式与 CSS 中的 max-height 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to max-height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/max-height。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/max-height for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
maxWidth
maxWidth 是该组件的最大宽度（以逻辑像素为单位）。
¥maxWidth is the maximum width for this component, in logical pixels.
它的工作方式与 CSS 中的 max-width 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to max-width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/max-width。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/max-width for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
minHeight
minHeight 是该组件的最小高度（以逻辑像素为单位）。
¥minHeight is the minimum height for this component, in logical pixels.
它的工作方式与 CSS 中的 min-height 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to min-height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/min-height。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/min-height for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
minWidth
minWidth 是该组件的最小宽度（以逻辑像素为单位）。
¥minWidth is the minimum width for this component, in logical pixels.
它的工作方式与 CSS 中的 min-width 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to min-width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/min-width。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/min-width for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
overflow
overflow 控制子级的测量和显示方式。overflow: hidden 导致视图被剪裁，而 overflow: scroll 导致视图独立于其父级主轴进行测量。它的工作方式类似于 CSS 中的 overflow（默认值：可见）。详细信息请参见 https://web.nodejs.cn/en/docs/Web/CSS/overflow。
¥overflow controls how children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents' main axis. It works like overflow in CSS (default: visible). See https://web.nodejs.cn/en/docs/Web/CSS/overflow for more details.
| 类型 | 必需的 |
|---|---|
| enum('visible', 'hidden', 'scroll') | 不 |
padding
设置 padding 与设置 paddingTop、paddingBottom、paddingLeft 和 paddingRight 具有相同的效果。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/padding。
¥Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight. See https://web.nodejs.cn/en-US/docs/Web/CSS/padding for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingBottom
paddingBottom 在 CSS 中的作用类似于 padding-bottom。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/padding-bottom。
¥paddingBottom works like padding-bottom in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/padding-bottom for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingEnd
当方向为 ltr 时，paddingEnd 相当于 paddingRight。当方向为 rtl 时，paddingEnd 相当于 paddingLeft。
¥When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingHorizontal
设置 paddingHorizontal 与设置 paddingLeft 和 paddingRight 类似。
¥Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingLeft
paddingLeft 在 CSS 中的作用类似于 padding-left。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/padding-left。
¥paddingLeft works like padding-left in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/padding-left for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingRight
paddingRight 在 CSS 中的作用类似于 padding-right。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/padding-right。
¥paddingRight works like padding-right in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/padding-right for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingStart
当方向为 ltr 时，paddingStart 相当于 paddingLeft。当方向为 rtl 时，paddingStart 相当于 paddingRight。
¥When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingTop
paddingTop 在 CSS 中的作用类似于 padding-top。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/padding-top。
¥paddingTop works like padding-top in CSS. See https://web.nodejs.cn/en-US/docs/Web/CSS/padding-top for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
paddingVertical
设置 paddingVertical 与设置 paddingTop 和 paddingBottom 类似。
¥Setting paddingVertical is like setting both of paddingTop and paddingBottom.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
position
React Native 中的 position 与 常规 CSS 类似，但默认情况下所有内容都设置为 relative。
¥position in React Native is similar to regular CSS, but everything is set to relative by default.
relative 将根据布局的正常流程定位元素。Insets（top、bottom、left、right）将相对于此布局偏移。
¥relative will position an element according to the normal flow of the layout. Insets (top, bottom, left, right) will offset relative to this layout.
absolute 将元素从布局的正常流程中取出。Insets 将相对于其 包含块 偏移。
¥absolute takes the element out of the normal flow of the layout. Insets will offset relative to its containing block.
static 将根据布局的正常流程定位元素。Insets 将不起作用。static 元素不构成绝对后代的包含块。
¥static will position an element according to the normal flow of the layout. Insets will have no effect.
static elements do not form a containing block for absolute descendants.
有关更多信息，请参阅 使用 Flexbox 文档的布局。此外，Yoga 文档 有更多关于 position 在 React Native 和 CSS 之间的区别的详细信息。
¥For more information, see the Layout with Flexbox docs. Also, the Yoga documentation has more details on how position differs between React Native and CSS.
| 类型 | 必需的 |
|---|---|
| enum('absolute', 'relative', 'static') | 不 |
right
right 是偏移该组件右边缘的逻辑像素数。
¥right is the number of logical pixels to offset the right edge of this component.
它的工作方式与 CSS 中的 right 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to right in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
有关 right 如何影响布局的更多详细信息，请参阅 https://web.nodejs.cn/en-US/docs/Web/CSS/right。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/right for more details of how right affects layout.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
rowGap
rowGap 在 CSS 中的作用类似于 row-gap。React Native 仅支持像素单位。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/row-gap。
¥rowGap works like row-gap in CSS. Only pixel units are supported in React Native. See https://web.nodejs.cn/en-US/docs/Web/CSS/row-gap for more details.
| 类型 | 必需的 |
|---|---|
| number | 不 |
start
当方向为 ltr 时，start 相当于 left。当方向为 rtl 时，start 相当于 right。
¥When the direction is ltr, start is equivalent to left. When the direction is rtl, start is equivalent to right.
此样式优先于 left、right 和 end 样式。
¥This style takes precedence over the left, right, and end styles.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
top
top 是偏移该组件顶部边缘的逻辑像素数。
¥top is the number of logical pixels to offset the top edge of this component.
它的工作方式与 CSS 中的 top 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。
¥It works similarly to top in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
有关 top 如何影响布局的更多详细信息，请参阅 https://web.nodejs.cn/en-US/docs/Web/CSS/top。
¥See https://web.nodejs.cn/en-US/docs/Web/CSS/top for more details of how top affects layout.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
width
width 设置该组件的宽度。
¥width sets the width of this component.
它的工作方式与 CSS 中的 width 类似，但在 React Native 中你必须使用点或百分比。不支持 Ems 和其他单位。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/width。
¥It works similarly to width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://web.nodejs.cn/en-US/docs/Web/CSS/width for more details.
| 类型 | 必需的 |
|---|---|
| 数字、字符串 | 不 |
zIndex
zIndex 控制哪些组件显示在其他组件之上。通常，你不使用 zIndex。组件根据其在文档树中的顺序进行渲染，因此后面的组件会覆盖前面的组件。如果你有不希望出现此行为的动画或自定义模式界面，那么 zIndex 可能会很有用。
¥zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom modal interfaces where you don't want this behavior.
它的工作原理类似于 CSS z-index 属性 - 具有较大 zIndex 的组件将渲染在顶部。将 z 方向想象为从手机指向你的眼球。详细信息请参见 https://web.nodejs.cn/en-US/docs/Web/CSS/z-index。
¥It works like the CSS z-index property - components with a larger zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://web.nodejs.cn/en-US/docs/Web/CSS/z-index for more details.
在 iOS 上，zIndex 可能需要 View 互为兄弟，才能按预期工作。
¥On iOS, zIndex may require Views to be siblings of each other for it to work as expected.
| 类型 | 必需的 |
|---|---|
| number | 不 |