ReactNative开发(三)之布局详解

一、FlexBox布局

React Native中的布局方式为FlexBox，在React Native中布局采用的是FleBox(弹性框)进行布局。FlexBox在不同尺寸的设备上都能保持基本一致的布局，属于CSS3弹性布局规范，在这里是没有尺寸的单位的，代表了独立像素，下面来介绍一些布局的使用方式

二、父布局的属性

1> flexDirection        enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
2> flexWrap             enum(‘wrap’, ‘nowrap’)
3> justifyContent       enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
4> alignItems           enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

1> flexDirection

//flexDirection有四个属性值
row: 从左向右依次排列
row-reverse: 从右向左依次排列
column(default): 默认的排列方式，从上向下排列
column-reverse: 从下向上排列

这里给出一个样例代码，布局在RN中默认是从上往下排列

<View style={ {flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
          <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
            <Text style={ {fontSize:16}}>1</Text>
          </View>
          <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
            <Text style={ {fontSize:16}}>2</Text>
          </View>
          <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
            <Text style={ {fontSize:16}}>3</Text>
          </View>
          <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
            <Text style={ {fontSize:16}}>4</Text>
          </View>
        </View>

row: 从左向右依次排列

row-reverse: 从右向左依次排列

column(default): 默认的排列方式，从上向下排列

column-reverse: 从下向上排列

2> flexWrap

felxWrap表示是否允许多行排列，默认为nowrap，设置为wrap相当于自动换行的设置

nowrap flex的元素只排列在一行上，可能导致溢出。
wrap flex的元素在一行排列不下时，就进行多行排列。
   <View style={ {height:500,flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20,flexWrap:'wrap'}}>

允许换行，flexWrap:’wrap’

不允许换行，flexWrap:’nowrap’

3> justifyContent

justifyContent
属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start，其实就是安排子布局在他里面的位置，靠左靠右或居中其属性如下：
flex-start(default)
从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同

space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

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

flex-end

center

space-between（第一个和最后一个靠边，中间元素间距相同）

space-around（行里面的每个元素左右间距相同）

4> alignItems

alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。其实想当于纵轴的排列和3是一个性质

flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中，如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

flex-start 元素向侧轴起点对齐

flex-end 元素向侧轴终点对齐

center 元素在侧轴居中

stretch 弹性元素被在侧轴方向被拉伸

三、子View的属性

1> alignSelf

alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性,包括以下几点，同父布局类似显示；

auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器为“stretch”
stretch 元素被拉伸以适应容器。
center  元素位于容器的中心。
flex-start  元素位于容器的开头。
flex-end    元素位于容器的结尾。

2> flex

flex 属性定义了一个可伸缩元素的能力，默认为0，在Android中相当于权重；

四、其他布局的属性

1>视图边框

borderBottomWidth   number 底部边框宽度
borderLeftWidth     number 左边框宽度
borderRightWidth    number 右边框宽度
borderTopWidth      number 顶部边框宽度
borderWidth         number 边框宽度
borderColor         边框颜色

2>外边距

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

3>内边距

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

4>边缘

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