React Native中的flexbox佈局

分類： React Native

說到佈局，不論是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主要設置容器中的元素在垂直方向上的佈局（個人理解，如有不對請指正...）