React Native布局

React Native中布局采用的是FleBox(弹性框)进行布局。在React Native中，有4个容器属性，2个项目属性，分别是：

 

容器(父视图)属性：flexDirection   flexWrap   justifyContent  alignItems

项目(子视图)属性：flex  alignSelf

一、flexDirection容器属性: `row | row-reverse | column | column-reverse`,默认为：'column'

　　row：主轴为水平方向，起点在左端。

　　row-reverse：主轴为水平方向，起点在右端。

　　column(默认值)：主轴为垂直方向，起点在上沿。

　　column-reverse：主轴为垂直方向，起点在下沿。

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.viewSize}>
          <Text style={ {fontSize:16}}>1</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>2</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>3</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>4</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>5</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'gray',
    marginTop:30
  },

  viewSize:{
    width:40,
    height:40,
    backgroundColor:'purple',
    margin:5
  }

});

咱们先把flexDirection设置为row，结果：

设置为row-reverse就是反着的

设置为column：

二、flexWrap容器属性: `nowrap | wrap `

   默认状况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，若是一条轴线排不下，如何换行。

　2.1 nowrap(默认值)：不换行:

   

 

  2.2 wrap：换行，第一行在上方

   

 

3:justifyContent容器属性:`flex-start | flex-end | center | space-between | space-around` ,定义了伸缩项目在主轴线的对齐方式

  flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

  flex-end：伸缩项目向一行的结束位置靠齐。

  center：伸缩项目向一行的中间位置靠齐。

  space-between：两端对齐，项目之间的间隔都相等。

  space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

 

四、alignItems容器属性:`flex-start | flex-end | center | baseline | stretch`定义项目在交叉轴上如何对齐，能够把其想像成侧轴（垂直于主轴）的“对齐方式”。

  flex-start：交叉轴的起点对齐。

  flex-end：交叉轴的终点对齐 。

  center：交叉轴的中点对齐。

  baseline：项目的第一行文字的基线对齐。

  stretch（默认值）：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

五、alignSelf项目属性:“auto | flex-start | flex-end | center | baseline | stretch”。align-self属性容许单个项目有与其余项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

 

六、flex项目属性，number，比例。

七、其余布局

 

     7.一、视图边框

      borderLeftWidth number 左边框宽度

　　borderRightWidth number 右边框宽度

　　borderTopWidth number 顶部边框宽度

　　borderWidth number 边框宽度

　　border<Bottom|Left|Right|Top>Color 个方向边框的颜色

　　borderColor 边框颜色

 

   7.二、尺寸

　　width number

      height number

     7.3外边距

　　margin number 外边距

　　marginBottom number 下外边距

　　marginHorizontal number 左右外边距

　　marginLeft number 左外边距

　　marginRight number 右外边距

　　marginTop number 上外边距

　　marginVertical number 上下外边距

　　7.四、内边距

　　padding number 内边距

　　paddingBottom number 下内边距

　　paddingHorizontal number 左右内边距

　　paddingLeft number 作内边距

　　paddingRight number 右内边距

　　paddingTop number 上内边距

　　paddingVertical number 上下内边距

　　7.五、边缘

　　left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

　　right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移

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

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

　　7.六、定位(position)

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

　　absolute：生成绝对定位的元素，元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　relative：生成相对定位的元素，相对于其正常位置进行定位。所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。