Layout Props

Layout Props

道具

alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')

alignContent控制行如何在横向上对齐，覆盖alignContent父项。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/align-content。

alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')

alignItems沿着横向方向对齐儿童。例如，如果孩子垂直流动，alignItems控制他们水平对齐的方式。它像align-itemsCSS 一样工作（默认：拉伸）。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/align-items。

alignSelf?: enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')

alignSelf控制孩子如何在横向排列，覆盖alignItems父母。它像align-selfCSS 一样工作（默认：auto）。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/align-self。

aspectRatio?: number

纵横比控制节点的未定义维度的大小。长宽比是一个非标准属性，只有在反应本机而不是CSS中才可用。

• 在具有设置的宽度/高度宽高比的节点上控制未设置尺寸的尺寸

• 如果未设置，则在设置了柔性基础高宽比的节点上控制交叉轴上节点的大小

• 在具有度量函数纵横比的节点上，就好像度量函数测量弹性基础一样

• 在具有弯曲增长/收缩纵横比的节点上，如果未设置，则控制交叉轴上节点的大小

• 纵横比考虑最小/最大尺寸

borderBottomWidth?: number

borderBottomWidth像border-bottom-widthCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width。

borderLeftWidth?: number

borderLeftWidth像border-left-widthCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width。

borderRightWidth?: number

borderRightWidth像border-right-widthCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width。

borderTopWidth?: number

borderTopWidth像border-top-widthCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width。

borderWidth?: number

borderWidth像border-widthCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-width。

bottom?: number, string

bottom 是抵消此组件底部边缘的逻辑像素数。

它的工作方式与bottomCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

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

display?: enum('none', 'flex')

display 设置此组件的显示类型。

它与displayCSS 类似，但只支持'flex'和'none'。'flex'是默认值。

flex?: number

在React中，Native flex不能像在CSS中那样工作。flex是一个数字而不是一个字符串，它可以根据https://github.com/facebook/yoga上的Yoga库来工作

何时flex是一个正数，它使组件变得灵活，并且它的大小将与其弹性值成比例。因此，flex设置为2 的组件将占用两倍的空间作为flex设置为1 的组件。

当flex为0时，该组件是按照尺寸width和height，它是不灵活的。

当flex为-1时，组件通常按照width和height。但是，如果没有足够的空间，组件会缩小到minWidth和minHeight。

flexGrow，flexShrink和flexBasis的工作方式与CSS中相同。

flexBasis?: number, string

flexDirection?: enum('row', 'row-reverse', 'column', 'column-reverse')

flexDirection控制容器的儿童的方向。row从左到右，column从上到下，你可能会猜到其他两个人做了什么。它像flex-directionCSS 一样工作，除了默认值是column。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。

flexGrow?: number

flexShrink?: number

flexWrap?: enum('wrap', 'nowrap')

flexWrap控制儿童在弹性容器的末端是否可以环绕。它像flex-wrapCSS 一样工作（默认：nowrap）。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap。

height?: number, string

height 设置此组件的高度。

它的工作方式与heightCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/height。

justifyContent?: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

justifyContent使主要方向的儿童一致。例如，如果孩子垂直流动，justifyContent控制他们如何垂直对齐。它像justify-contentCSS 一样工作（默认：flex-start）。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content。

left?: number, string

left 是偏移此组件左边缘的逻辑像素数。

它的工作方式与leftCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

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

margin?: number, string

设置margin有作为设置每个相同的效果marginTop，marginLeft，marginBottom，和marginRight。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/margin。

marginBottom?: number, string

marginBottom像margin-bottomCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom。

marginHorizontal?: number, string

设置marginHorizontal有作为设置都相同的效果marginLeft和marginRight。

marginLeft?: number, string

marginLeft像margin-leftCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left。

marginRight?: number, string

marginRight像margin-rightCSS 一样工作。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right。

marginTop?: number, string

marginTop像margin-topCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top。

marginVertical?: number, string

设置marginVertical有作为设置都相同的效果marginTop和marginBottom。

maxHeight?: number, string

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

它的工作方式与max-heightCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/max-height。

maxWidth?: number, string

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

它的工作方式与max-widthCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/max-width。

minHeight?: number, string

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

它的工作方式与min-heightCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/min-height。

minWidth?: number, string

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

它的工作方式与min-widthCSS 类似，但在React Native中，您必须使用点数或百分比。Ems和其他单位不受支持。

有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/min-width。

overflow?: enum('visible', 'hidden', 'scroll')

overflow控制儿童如何测量和显示。overflow: hidden导致视图被裁剪，同时overflow: scroll导致独立于父母主轴的视图被测量。它像overflowCSS 一样工作（默认：可见）。有关更多详细信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/overflow。overflow: visible只适用于iOS。在Android上，所有视图都会剪辑他们的孩子。

padding?: number, string

设置padding有作为设置每个相同的效果paddingTop，paddingBottom，paddingLeft，和paddingRight。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/padding。

paddingBottom?: number, string

paddingBottom像padding-bottomCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom。

paddingHorizontal?: number, string

设置paddingHorizontal就像设置paddingLeft和paddingRight。

paddingLeft?: number, string

paddingLeft像padding-leftCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left。

paddingRight?: number, string

paddingRight像padding-rightCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right。

paddingTop?: number, string

paddingTop像padding-topCSS 一样工作。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top。

paddingVertical?: number, string

设置paddingVertical就像设置paddingTop和paddingBottom。

position?: enum('absolute', 'relative')

position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.

If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.

See https://github.com/facebook/yoga for more details on how position differs between React Native and CSS.

right?: number, string

right is the number of logical pixels to offset the right edge of this component.

It works similarly to right in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how right affects layout.

top?: number, string

top is the number of logical pixels to offset the top edge of this component.

It works similarly to top in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how top affects layout.

width?: number, string

width sets the width of this component.

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://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

zIndex?: number

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.

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://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details.

iosdirection?: enum('inherit', 'ltr', 'rtl')

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://facebook.github.io/yoga/docs/rtl/ for more details.

 © 2015–2017 Facebook Inc.

Licensed under the Creative Commons Attribution 4.0 International Public License.

https://facebook.github.io/react-native/docs/layout-props.html