2、React Native中的flexbox布局

說到布局，不論是Android還是iOS還是web前端，都有涉及到，React Native中也有布局，主要採用了類似css中的flexbox布局，不過這種布局跟css中的flexbox布局稍微有點不同，下面就記錄在React Native中使用flexbox布局的方法，主要涉及到如下幾個屬性：

1、flex

2、flexDirection

3、alignSelf

4、alignItems

5、justifyContent

還有其他的一些屬性，可以參考React Native中文文檔：http://wiki.jikexueyuan.com/project/react-native/flexbox.html，或者css中有關flexbox屬性的文檔：http://www.runoob.com/cssref/css3-pr-align-items.html

下面就來一一解釋上面幾個屬性： flex屬性 flex屬性的取值為整形（大於0），設定了flex屬性就代表該元素是可伸縮的，如下面的代碼：

class Test extends Component {render() {return (<View style={styles.container}><View style={styles.child1}></View><View style={styles.child2}></View><View style={styles.child3}></View></View>);}}const styles = {container: {flex: 1, flexDirection: 'column', //子項目垂直排列，預設是垂直排列的},child1: {flex: 1, backgroundColor: '#aa0000',},child2: {flex: 1, backgroundColor: '#aaaa00',},child3: {flex: 2, backgroundColor: '#0000aa',}};

在上面的代碼中，分別為child1, child2, child3設定了flex屬性為1, 1, 2，代表這三個元素在垂直方向上是按1:1:2的比例排列的，在手機上顯示出來的效果如下圖： 由上面的代碼和運行效果看來，flex屬性特別像Android中的layout_weight屬性，都是設定元素的比例 flexDirection屬性 flexDirection屬性有兩個取值，分別為'row'和'column'，代表某個元素中的子項目的相片順序為橫向排列（'row'）或縱向排列（'column'），不設定flexDirection屬性時，預設是按縱向排列的，所以在上圖中，我們看到三個組件是縱向排列的，在上面的代碼中，我們將styles中container的flexDirection屬性改為'row'，然後在手機上運行，結果如下圖所示：

即可證明，flexDirection設定為'row'後，子項目按橫向次序排列，如果設定為'column'或者不設定，則是按縱向排列 alignSelf屬性 alignSelf屬性的取值比較多，有這麼幾個：'auto', 'flex-start', 'flex-end', 'center', 'stretch'，下面用一個例子來展示alignSelf的幾個值得差異：

class Test extends Component {render() {return (<View style={styles.container}><Text style={[styles.block1, styles.text]}>alignSelf: 'flex-start'</Text><Text style={[styles.block2, styles.text]}>alignSelf: 'flex-end'</Text><Text style={[styles.block3, styles.text]}>alignSelf: 'center'</Text><Text style={[styles.block4, styles.text]}>alignSelf: 'auto'</Text><Text style={[styles.block5, styles.text]}>alignSelf: 'stretch'</Text></View>);}}const styles = {container: {flex: 1,},text: {fontSize: 13,color: '#ff0000',marginTop: 10,},block1: {width: 150,height: 40,backgroundColor: '#6699ff',alignSelf: 'flex-start',},block2: {width: 150,height: 40,backgroundColor: '#6699ff',alignSelf: 'flex-end',},block3: {width: 150,height: 40,backgroundColor: '#6699ff',alignSelf: 'center',},block4: {width: 150,height: 40,backgroundColor: '#6699ff',alignSelf: 'auto',},block5: {height: 40,backgroundColor: '#6699ff',alignSelf: 'stretch',}};

上面的代碼在手機上啟動並執行效果如下圖： 通過上面的例子可以看出，alignSelf的幾個屬性分別代表元素在容器中的位置，其中： 'center'表示元素位於容器的中心； 'flex-start'表示元素位於容器的開頭； 'flex-end'表示元素位於容器的結尾； 'stretch'表示元素將會展開以適應容器（當該元素沒有固定大小時）； 'auto'表示元素將會繼承父元素的alignItems屬性，若沒有父元素或者父元素沒有指定alignItems屬性時，則使用'stretch'屬性，在上面的例子中，如果將styles中的block4的樣式中，去掉width屬性再執行代碼，可以發現元素也在水平方向上充滿了父元素。 可以對比css中的align-self屬性： http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=center alignItems屬性 跟alignSelf屬性類似，alignItems屬性有除'auto'外的其他幾個屬性，alignItems規定容器內各項的預設對齊，使用每個項目的 alignSelf 屬性可重寫 alignItems 實現。可以參考css中的align-items屬性： http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center justifyContent屬性 justifyContent屬性可取的值有：'flex-start', 'flex-end', 'center', 'space-between', 'space-around'，可對比參考css中的屬性： http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start 註：可通過同時設定alignItems: 'center'和justifyContent: 'center'來讓元素中的內容水平和垂直置中，下面用一個例子來展示justifyContent的效果：

class Test extends Component {render() {return (<View style={styles.container}><Text style={[styles.block, styles.text]}></Text><Text style={[styles.block, styles.text]}></Text><Text style={[styles.block, styles.text]}></Text><Text style={[styles.block, styles.text]}></Text><Text style={[styles.block, styles.text]}></Text></View>);}}const styles = {container: {flex: 1,justifyContent: 'flex-start',},text: {fontSize: 13,color: '#ff0000',marginTop: 10,},block: {width: 150,height: 40,backgroundColor: '#6699ff',}};

以上代碼在手機上的運行效果如下圖：
如果將container中的justifyContent改為flex-end，則運行效果如下：

如果將container中的justifyContent改為center，則運行效果如下：


如果將container中的justifyContent改為center，並加入alignItems:'center'，則運行效果如下：


從上面的代碼和效果圖可以比較得出： alignItems主要設定容器中元素在水平方向上的布局，justifyContent主要設定容器中的元素在垂直方向上的布局（個人理解，如有不對請指正...）