React Native布局

React Native中的FlexBox和Web Css 上的FlexBox的不同：

FlexDirection：React Native中默认为 flexDirection: 'column'，在Web Css 中默认为flex-direction:'row'

alignItems：React Native中默认为 alignItems:'stretch'，在Web Css 中默认 align-items:'flex-start'

flex:相比Web Css的flex接受多参数，如：flex:2 2 10%,但在React Native中flex只接受一个参数

不支持属性：align-content，flex-basic，order，flex-grow，flex-shrink

Layout Props

Flex in React Native

父视图属性（容器属性）

flexDirection enum('row'，'column'，'row-reverse'，'column-reverse')

flexWrap enum('wrap'，'nowarp')

justifyContent enum('flex-start'，'flex-end'，'center'，'space-between'，'space-around')

alignItems enum('flex-start'，'flex-end'，'center'，'stretch')

主轴和侧轴（横轴和数轴）

主轴是水平方向的轴线，可以理解成横轴，侧轴垂直与主轴，可以理解为竖轴

子视图属性

alignSelf enum('auto'，'flex-start'，'flex-end'，'center'，'stretch')

flex number

其他布局 in React Native

---

以下属性是React Native所支持的除Flex以外的其它布局属性。

视图边框

• borderBottomWidth number 底部边框宽度
• borderLeftWidth number 左边框宽度
• borderRightWidth number 右边框宽度
• borderTopWidth number 顶部边框宽度
• borderWidth number 边框宽度

• border<Bottom

  Left

  Right

  Top>Color 个方向边框的颜色

• borderColor 边框颜色

尺寸

• width number
• height number

外边距

• margin number 外边距
• marginBottom number 下外边距
• marginHorizontal number 左右外边距
• marginLeft number 左外边距
• marginRight number 右外边距
• marginTop number 上外边距
• marginVertical number 上下外边距

内边距

• padding number 内边距
• paddingBottom number 下内边距
• paddingHorizontal number 左右内边距
• paddingLeft number 做内边距
• paddingRight number 右内边距
• paddingTop number 上内边距
• paddingVertical number 上下内边距

边缘

• left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
• top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

定位(position)

position enum(‘absolute’, ‘relative’)属性设置元素的定位方式，为将要定位的元素定义定位规则。

• absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。