React-Native之 Flexbox布局

React-Native中采用的是Flexbox布局，Flexbox与Android中的LinearLayout有相同之处，即：水平与垂直，两个方向的布局，但Flexbox更为强大。
Flexbox具体的属于介绍可以百度查看。这里主要根据实例来讲解Flexbox的一些用处。

1.上中下三层布局

上中下三层布局

上图为常见的上中下三层布局。

render() {    
//ios需要距离顶部20像素    
var y = Platform.OS === 'ios' ? 20 : 0;   
 return (        
    <View style={{flex:1}}>            
        <View style={{height:50, backgroundColor:'#FFA500', marginTop: y }}/>            
        <View style={{flex:1, backgroundColor:'#FF83FA'}}/>            
        <View style={{height:50, backgroundColor:'#F08080'}}/>        
    </View>    
  );
}

上述代码中，出现两次flex:1的属性。
flex:1(一般该数字为1即可，和Android中的weight属性类似),表示所在视图填充满所有剩余空间。
最外层view上用该属性，则表示全屏展示。
中间的三个子view，分别表示上中下三个视图。第一个与第三个视图有具体的高。中间的视图有flex:1的属性，表示中间的视图填充满除去第一个与第三个视图后所有的空间。即可实现上中下三层布局。

2.底部按钮平分布局

底部按钮平分

上图中底部添加了五个布局平分了底部的宽度。

render() {    
//ios需要距离顶部20像素    
  var y = Platform.OS === 'ios' ? 20 : 0;    
  return (        
    <View style={{flex:1}}>            
      <View style={{height:50, backgroundColor:'#FFA500', marginTop: y}}/>            
      <View style={{flex:1, backgroundColor:'#FF83FA'}}/>            
      <View style={{flexDirection:'row',alignItems:'stretch',height:50, backgroundColor:'#F08080'}}>                
        <Text style={{flex:1, backgroundColor:'#E0FFFF'}}>1</Text>                
        <Text style={{flex:1, backgroundColor:'#DEB887'}}>2</Text>                
        <Text style={{flex:1, backgroundColor:'#D02090'}}>3</Text>                
        <Text style={{flex:1, backgroundColor:'#D15FEE'}}>4</Text>                
        <Text style={{flex:1, backgroundColor:'#CDCD00'}}>5</Text>            
    </View>        
  </View>    
);
}

上述代码在第三个子View中做了修改；

修改1：添加flexDirection:'row'属性，表示该视图的子视图将水平方向排版。flexDirection的值默认为'column'，垂直排版。

修改2：添加 alignItems:'stretch'属性，表示子视图的填充满父视图。配合flexDirection属性，flexDirection为row的时候，alignItems:'stretch'表示子视图的高填充满父视图。为column的时候，表示子视图的宽填充满父视图。

修改3：在该View下添加了五个Text子视图，每个子视图有属性flex:1。flex:1表示填充满剩余空间，五个都填充满剩余空间，则会平分所有的空间。

3.继续完善ing...

End总结

1.flex:1 填充满剩余空间；
2.flexDirection:'row' 子布局水平排版，'column'表示子布局垂直排版；
3.alignItems:'stretch' alignItems表示与主轴垂直方向的排布方式(主轴即父布局的排列方向，水平或者垂直)。stretch表示与主轴垂直方向上填充满父布局；center表示与主轴垂直方向居中；flex-start，flex-end等。