React Native采用一中全新的布局方式：FlexBox（彈性布局）。可以很方便的實現各種復雜布局，是全新的針對web和移動開發布局的一種實現方式。
何為FlexBox?
完整名稱為：the flexible box Module,旨在通過彈性的方式來對齊和分布容器中的組件。Flexbuju的主要思想是：讓容器有能力讓其子項目能夠改變其寬度|高度|順序，以最佳方式填充可用空間。
在布局中，首先得確定主軸方向(flexDirection)，主軸組件的對齊方式（justifyContent），側軸組件的對齊方式(alignItems)，通過以上四點可以基本確定布局。
FlexBox屬性：
flexDirection:該屬性確定了主軸方向，枚舉值。
row 主軸方向為水平，起點在左端。
row- reverse 主軸方向為水平，起點在右端
column(默認) 主軸方向為垂直，起點在上端
column-reverse 主軸方向為垂直，起點在下端
justifyContent:該屬性確定了組件在主軸方向上的對齊方式，枚舉值。
flex-start(默認) 組件沿着主軸方向的起始位置靠齊。如：假如主軸方向是row的話就是左對齊，是row- reverse的話就是右對齊，是column的話就是上對齊，是 column-reverse的話就是下對齊。
flex-end 組件沿着主軸方向的結束位置靠齊，和flex-start相反。
space-between 組件在主軸方向上兩端對齊，其中的間隔相等。
space-around 組件會平均分配在主軸方向上，兩端保留一定的位置空間。
alignItems:組件在側軸方向上的對齊方式。
flex-start 組件沿着側軸上的起點對齊
flex-end 組件沿着側軸上的終點對齊
center 組價在側軸方向上居中對齊
stretch(默認) 組件在側軸方向上占滿
flexWrap: 是否換行
默認情況下，項目都排列在一條線上，放不下的部分則不放置，flexWap就是定義是否換行的。
nowrap(默認) 不換行
wrap 換行，第一行在上方
wrap-reverse 換行，第一行在下方
flex:有三個參數，默認參數為 0 1 auto。 第一個參數為flex-grow,第二，第三個為:flex-shrink和flex-basis。
alignSelf:定義單個組件自己的對齊方式，默認為auto。枚舉值：auto|flex-start|flex-end|center|baseline|stretch
position：枚舉值，absolute絕對定位，relative相對定位
margin:內邊距
padding：外邊距
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-12
* 彈性布局 flex-box
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'
/**-----------------------------------第一個示例程序----------------------------------------------------- **/
class Project extends Component {
render() { //初始化
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',height:50}}>第一個</Text>
<Text style={{backgroundColor:'blue',height:100}}>第二個</Text>
<Text style={{backgroundColor:'green',height:160}}>第三個</Text>
<Text style={{backgroundColor:'yellow',height:200}}>第四個</Text>
</View>
);
}
}
//樣式
const styles = StyleSheet.create({
container: {
// flex:1, //充滿全屏,否則內容多少,只顯示多少區域. 是'flex-grow''flex-shrink''flex-basis'三個屬性的縮寫,其中第二個和第三個參數都是可選,默認值是"0 1 auto" 寬度 = 彈性寬度 * (flexGrow/sum(flexGrow))
// width:200,
height:200,
marginTop:20,//上邊距
backgroundColor:'black',//背景色
flexDirection:'row', //React Native 布局采用FlexBox(彈性布局),該屬性是設置布局的主軸方向為row:橫向(默認方向是豎向:column)
justifyContent:'space-between', //定義了伸縮項目在主軸線的對齊方式 flex-start | flex-end | center | space-between | space-around
alignItems:'flex-start' //定義了伸縮項目在側軸(交叉軸)的對齊方式 flex-start | flex-end | center | baseline | stretch(默認)
}
});
/**-----------------------------------第二個示例程序----------------------------------------------------- **/
class Project1 extends Component {
render() { //初始化
return (
<View style={styles1.container}>
<Text style={{backgroundColor:'red',width:200}}>第一個</Text>
<Text style={{backgroundColor:'blue',width:300}}>第二個</Text>
<Text style={{backgroundColor:'green',width:200}}>第三個</Text>
<Text style={{backgroundColor:'yellow',width:200}}>第四個</Text>
</View>
);
}
}
const styles1 = StyleSheet.create({
container:{
backgroundColor:'black',
marginTop:20,
flexDirection:'row',
justifyContent:'flex-start',
flexWrap:'wrap' //定義顯示不下的顯示模式,默認情況下,控件都是在一條線上 wrap換行 nowarp(默認值)不換行 warp-reverse:換行,效果和wrap相反
}
});
/**-----------------------------------第三個示例程序----------------------------------------------------- **/
//alignSelf允許單個項目可以有自己單獨的對齊方式
class Project2 extends Component{
render(){
return(
<View style={styles2.container}>
<Text style={{backgroundColor:'red',flex:1,height:50,alignSelf:'center'}}>第一個</Text>
<Text style={{backgroundColor:'blue',flex:2,height:30,alignSelf:'flex-start'}}>第二個</Text>
<Text style={{backgroundColor:'green',flex:2,height:70,alignSelf:'flex-end'}}>第三個</Text>
<Text style={{backgroundColor:'yellow',flex:1,height:80,alignSelf:'stretch'}}>第四個</Text>
</View>
);
}
}
const styles2 = StyleSheet.create({
container:{
backgroundColor:'black',
marginTop:20,
flexDirection:'row'
}
});
AppRegistry.registerComponent('Project', () => Project2); //注冊