alignItems
决定了子元素在次轴方向的排列方式(此样式设置在父元素上)。例如若子元素本来是沿着竖直方向排列的(即主轴竖直,次轴水平),则alignItems
决定了它们在水平方向的排列方式。此样式和CSS中的align-items
表现一致,默认值为stretch。访问https://developer.mozilla.org/en-US/docs/Web/CSS/align-items来进一步了解。
alignSelf
决定了元素在父元素的次轴方向的排列方式(此样式设置在子元素上),其值会覆盖父元素的alignItems
的值。其表现和CSS上的align-self
一致(默认值为auto)。访问https://developer.mozilla.org/en-US/docs/Web/CSS/align-self来进一步了解。
borderBottomWidth
和CSS上的border-bottom-width
表现一致。访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width来进一步了解。
borderLeftWidth
和CSS上的border-left-width
表现一致。访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width来进一步了解。
borderRightWidth
和CSS上的border-right-width
表现一致。访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width来进一步了解。
borderTopWidth
和CSS上的border-top-width
表现一致。访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width来进一步了解。
borderWidth
和CSS上的border-width
表现一致。访问https://developer.mozilla.org/en-US/docs/Web/CSS/border-width来进一步了解。
bottom
值是指将本组件定位到距离底部多少个逻辑像素(底部的定义取决于position
属性)。
它的表现和CSS上的bottom
类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。
访问https://developer.mozilla.org/en-US/docs/Web/CSS/bottom来进一步了解bottom
是如何影响布局的。
在React Native中flex
的表现和CSS有些区别。 flex
在RN中只能为整数值,其具体表现请参考yoga引擎库
的文档,其网址是https://github.com/facebook/yoga
当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.
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
.访问https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction来进一步了解。
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).访问https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap来进一步了解。
height
用于设置组件的高度。
It works similarly to height
in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that.访问https://developer.mozilla.org/en-US/docs/Web/CSS/height来进一步了解。
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).访问https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content来进一步了解。
left
值是指将本组件定位到距离左边多少个逻辑像素(左边的定义取决于position
属性)。
它的表现和CSS上的left
类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。
访问https://developer.mozilla.org/en-US/docs/Web/CSS/left来进一步了解left
是如何影响布局的。
Setting margin
has the same effect as setting each of marginTop
, marginLeft
, marginBottom
, and marginRight
.访问https://developer.mozilla.org/en-US/docs/Web/CSS/margin来进一步了解。
marginBottom
works like margin-bottom
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom来进一步了解。
Setting marginHorizontal
has the same effect as setting both marginLeft
and marginRight
.
marginLeft
works like margin-left
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left来进一步了解。
marginRight
works like margin-right
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right来进一步了解。
marginTop
works like margin-top
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top来进一步了解。
Setting marginVertical
has the same effect as setting both marginTop
and marginBottom
.
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 logical pixel units, rather than percents, ems, or any of that.
访问https://developer.mozilla.org/en-US/docs/Web/CSS/max-height来进一步了解。
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 logical pixel units, rather than percents, ems, or any of that.
访问https://developer.mozilla.org/en-US/docs/Web/CSS/max-width来进一步了解。
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 logical pixel units, rather than percents, ems, or any of that.
访问https://developer.mozilla.org/en-US/docs/Web/CSS/min-height来进一步了解。
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 logical pixel units, rather than percents, ems, or any of that.
访问https://developer.mozilla.org/en-US/docs/Web/CSS/min-width来进一步了解。
overflow
controls how a 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).访问https://developer.mozilla.org/en/docs/Web/CSS/overflow来进一步了解。
Setting padding
has the same effect as setting each of paddingTop
, paddingBottom
, paddingLeft
, and paddingRight
.访问https://developer.mozilla.org/en-US/docs/Web/CSS/padding来进一步了解。
paddingBottom
works like padding-bottom
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom来进一步了解。
Setting paddingHorizontal
is like setting both of paddingLeft
and paddingRight
.
paddingLeft
works like padding-left
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left来进一步了解。
paddingRight
works like padding-right
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right来进一步了解。
paddingTop
works like padding-top
in CSS.访问https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top来进一步了解。
Setting paddingVertical
is like setting both of paddingTop
and paddingBottom
.
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.
访问https://facebook.github.io/yoga/docs/absolute-position/来进一步了解position
在React Native和CSS中的差异。
right
值是指将本组件定位到距离右边多少个逻辑像素(右边的定义取决于position
属性)。
它的表现和CSS上的right
类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。
访问https://developer.mozilla.org/en-US/docs/Web/CSS/right来进一步了解right
是如何影响布局的。
top
值是指将本组件定位到距离顶部多少个逻辑像素(顶部的定义取决于position
属性)。
它的表现和CSS上的top
类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。
访问https://developer.mozilla.org/en-US/docs/Web/CSS/top来进一步了解top
是如何影响布局的。
width
用于设置组件的宽度。
It works similarly to width
in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that.访问https://developer.mozilla.org/en-US/docs/Web/CSS/width来进一步了解。
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.访问https://developer.mozilla.org/en-US/docs/Web/CSS/z-index 来进一步了解。