首先看完阮一峰的Flex布局教程

1.Flex属性

class AwesomeProject extends Component {    
render() {        
return (            
<View style={styles.test}>                
<View style={styles.test1}></View>               
 <View style={styles.test1}></View>                <View style={styles.test2}></View>          
</View>       
 );   
 }
}
var styles = StyleSheet.create({    
test: {       
 flex:1,      
  borderWidth:5,       
 borderColor:'gray'   
 },  
  test1:{      
  flex:5,      
  height:40,     
   borderWidth:5,     
  borderColor:'blue'    
},    
test2:{        
flex:10,       
 borderWidth:5,      
  borderColor:'red'   
 },  
  test3:{  
  }
});

当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间。
因此，我们看到的布局图如下

Paste_Image.png

2.flexDirection

flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)；
row（默认值）：主轴为水平方向，起点在左端
column：主轴为垂直方向，起点在上沿

  class AwesomeProject extends Component {   
   render() {       
   return (          
  <View style={styles.test}>            
    <View style={styles.test1}>                  
  <View style={styles.test3}></View>      
              <View style={styles.test3}></View>    
              <View style={styles.test3}></View>      
              <View style={styles.test3}></View>          
              <View style={styles.test3}></View>            
              <View style={styles.test3}></View>      
          </View>             
   <View style={styles.test2}>                 
         <View style={styles.test3}></View>          
          <View style={styles.test3}></View>          
          <View style={styles.test3}></View>            
          <View style={styles.test3}></View>                
          <View style={styles.test3}></View>                
    </View>         
        <View style={styles.test2}></View>          </View>       
 );   
 }
}
var styles = StyleSheet.create({   
 test: {        
flex:1,        
borderWidth:5,        
borderColor:'gray'    
},    
test1:{        
flex:5,        
flexDirection:'row',        
borderWidth:5,        
borderColor:'blue'    
},    
test2:{        
flex:5,        
flexDirection:'column',        
borderWidth:5,        
borderColor:'blue'    
},    
test3:{        
width:20,        
height:20,        
borderRadius:20,        
backgroundColor:'green',    
}
}
);

效果如下图：

Paste_Image.png

以下属性可自己尝试：
flexWrap('wrap','nowrap')

alignItems('flex-start','flex-end','center','stretch')

alignSelf('auto','flex-start','flex-end','center','stretch')

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