首先看完阮一峰的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:{  
  }
});

當(dāng)一個(gè)(元素)組件，定義了flex屬性時(shí)，表示該元素是可伸縮的。當(dāng)然flex的屬性值是大于0的時(shí)候才伸縮，其小于和等于0的時(shí)候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，因?yàn)闆]有兄弟節(jié)點(diǎn)和它搶占空間。里層是3個(gè)view,可以看到三個(gè)view的flex屬性加起來是5+5+10=20,所以第一個(gè)view和第二個(gè)view分別占1／4伸縮空間， 最后一個(gè)view占據(jù)1／2空間。
因此，我們看到的布局圖如下

Paste_Image.png

2.flexDirection

flexDirection在React-Native中只有兩個(gè)屬性，一個(gè)是row(橫向伸縮)和column(縱向伸縮)；
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端
column：主軸為垂直方向，起點(diǎn)在上沿

  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')