kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-03 09:35:11 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
a7d46ea97012bdcc644e3397bbf60bd3cb37e9eb
react-native/docs/layout-props.md
Héctor Ramos e11d496e9d Additional markdown adjustments 
Summary:
Follow up to 9ec9567390
Closes https://github.com/facebook/react-native/pull/16759

Differential Revision: D6285219

Pulled By: hramos

fbshipit-source-id: 7012d257a5a6cff06cb2d94203a9379e4b7e3c4e
2017-11-09 09:55:05 -08:00

19 KiB
Raw Blame History

id, title, layout, category, permalink, next, previous
id title layout category permalink next previous
layout-props Layout Props docs APIs docs/layout-props.html picker-style-props vibrationios

Props

Reference

Props

marginHorizontal

Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.

Type Required
number, ,string No

alignContent

alignContent controls how rows align in the cross direction, overriding the alignContent of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details.

Type Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') No

alignSelf

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

Type Required
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') No

aspectRatio

Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in react native and not CSS.

  • On a node with a set width/height aspect ratio control the size of the unset dimension
  • 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
Type Required
number No

borderBottomWidth

borderBottomWidth works like border-bottom-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details.

Type Required
number No

borderEndWidth

When direction is ltr, borderEndWidth is equivalent to borderRightWidth. When direction is rtl, borderEndWidth is equivalent to borderLeftWidth.

Type Required
number No

borderLeftWidth

borderLeftWidth works like border-left-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details.

Type Required
number No

borderRightWidth

borderRightWidth works like border-right-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details.

Type Required
number No

borderStartWidth

When direction is ltr, borderStartWidth is equivalent to borderLeftWidth. When direction is rtl, borderStartWidth is equivalent to borderRightWidth.

Type Required
number No

borderTopWidth

borderTopWidth works like border-top-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details.

Type Required
number No

borderWidth

borderWidth works like border-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details.

Type Required
number No

bottom

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

It works similarly to bottom 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/bottom for more details of how bottom affects layout.

Type Required
number, ,string No

display

display sets the display type of this component.

It works similarly to display in CSS, but only support 'flex' and 'none'. 'flex' is the default.

Type Required
enum('none', 'flex') No

end

When the direction is ltr, end is equivalent to right. When the direction is rtl, end is equivalent to left.

This style takes precedence over the left and right styles.

Type Required
number, ,string No

flex

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 library at https://github.com/facebook/yoga

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.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

Type Required
number No

flexBasis

Type Required
number, ,string No

flexDirection

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

Type Required
enum('row', 'row-reverse', 'column', 'column-reverse') No

flexGrow

Type Required
number No

flexShrink

Type Required
number No

flexWrap

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

Type Required
enum('wrap', 'nowrap') No

height

height sets the height of this component.

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

Type Required
number, ,string No

justifyContent

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

Type Required
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') No

left

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

It works similarly to left 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/left for more details of how left affects layout.

Type Required
number, ,string No

margin

Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details.

Type Required
number, ,string No

marginBottom

marginBottom works like margin-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details.

Type Required
number, ,string No

marginEnd

When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.

Type Required
number, ,string No

alignItems

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

Type Required
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') No

marginLeft

marginLeft works like margin-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details.

Type Required
number, ,string No

marginRight

marginRight works like margin-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details.

Type Required
number, ,string No

marginStart

When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.

Type Required
number, ,string No

marginTop

marginTop works like margin-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details.

Type Required
number, ,string No

marginVertical

Setting marginVertical has the same effect as setting both marginTop and marginBottom.

Type Required
number, ,string No

maxHeight

maxHeight is the maximum height for this component, in logical pixels.

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.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

Type Required
number, ,string No

maxWidth

maxWidth is the maximum width for this component, in logical pixels.

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.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details.

Type Required
number, ,string No

minHeight

minHeight is the minimum height for this component, in logical pixels.

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.

See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details.

Type Required
number, ,string No

minWidth

minWidth is the minimum width for this component, in logical pixels.

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.

See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details.

Type Required
number, ,string No

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://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. overflow: visible only works on iOS. On Android, all views will clip their children.

Type Required
enum('visible', 'hidden', 'scroll') No

padding

Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details.

Type Required
number, ,string No

paddingBottom

paddingBottom works like padding-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details.

Type Required
number, ,string No

paddingEnd

When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.

Type Required
number, ,string No

paddingHorizontal

Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.

Type Required
number, ,string No

paddingLeft

paddingLeft works like padding-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details.

Type Required
number, ,string No

paddingRight

paddingRight works like padding-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details.

Type Required
number, ,string No

paddingStart

When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.

Type Required
number, ,string No

paddingTop

paddingTop works like padding-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details.

Type Required
number, ,string No

paddingVertical

Setting paddingVertical is like setting both of paddingTop and paddingBottom.

Type Required
number, ,string No

position

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.

Type Required
enum('absolute', 'relative') No

right

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.

Type Required
number, ,string No

start

When the direction is ltr, start is equivalent to left. When the direction is rtl, start is equivalent to right.

This style takes precedence over the left, right, and end styles.

Type Required
number, ,string No

top

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.

Type Required
number, ,string No

width

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.

Type Required
number, ,string No

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.

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.

Type Required
number No

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

Type Required Platform
enum('inherit', 'ltr', 'rtl') No iOS