我們?cè)?React Native 中使用 flexbox 規(guī)則來指定某個(gè)組件的子元素的布局爷光。Flexbox 可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)垫竞。
- 一般來說，使用
flexDirection,alignItems和justifyContent
三個(gè)樣式屬性就已經(jīng)能滿足大多數(shù)布局需求蛀序。
direction [d?? rek ?n] 方向件甥；指導(dǎo)；趨勢(shì)
align [?' la?n] 排列哼拔；排成一行
justify ['d?? st?' fai] 整理版面
content [k?n' tent] 內(nèi)容，容量
譯注：這里有一份簡(jiǎn)易布局圖解瓣颅，可以給你一個(gè)大概的印象倦逐。
Flex Direction
column ['k?l?m] 縱隊(duì)，列
row [r??] 行宫补，排
reverse [r?'v??s] 相反
React Native 中的 Flexbox 的工作原理和 web上的CSS基本一致檬姥，當(dāng)然也存在少許差異。首先是默認(rèn)值不同：flexDirection 的默認(rèn)值是 column 而不是row粉怕，而 flex 也只能指定一個(gè)數(shù)字值健民。
在組件的 style 中指定 flexDirection 可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列贫贝，還是沿著豎直軸(column)方向排列呢秉犹？默認(rèn)值是豎直軸(column)方向。
代碼如下
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
class MyApp extends Component {
render() {
return (
// 嘗試把 `flexDirection` 改為`column`
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{flex:1,backgroundColor:'powderblue'}} />
<View style={{flex:1,backgroundColor:'skyblue'}} />
<View style= {{flex:3,backgroundColor:'steelblue'}} />
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
效果如下：
render() {
return (
// 嘗試把 `flexDirection` 改為`column`
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
效果如下：
Justify Content
在組件的 style 中指定 justifyContent 可以決定其子元素沿著主軸的排列方式稚晚。
子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢崇堵？亦或應(yīng)該均勻分布？
對(duì)應(yīng)的這些可選項(xiàng)有：flex-start客燕、center鸳劳、flex-end、space-around以及space-between也搓。
代碼如下：
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
class MyApp extends Component {
render() {
return (
// 嘗試把 `flexDirection` 改為`column`
<View style={{
flex:1,
flexDirection:'column',
justifyContent:'space-between'
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
效果如下：
代碼如下：
render() {
return (
<View style={{
flex:1,
flexDirection:'column',
justifyContent:'space-around' // 改為'space-around'
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
效果如下：
Align Items
在組件的style中指定 alignItems赏廓，可以決定其子元素沿著 次軸（與主軸垂直的軸涵紊，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式幔摸。
子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢摸柄？亦或應(yīng)該均勻分布？
對(duì)應(yīng)的這些可選項(xiàng)有：flex-start抚太、center塘幅、flex-end 以及 stretch。
stretch [stret?] 伸展,張開尿贫；
注意：要使 stretch 選項(xiàng)生效的話佩憾，子元素在次軸方向上不能有固定的尺寸。
以下面的代碼為例：
只有將子元素樣式中的width: 50去掉之后眯杏，alignItems: 'stretch'才能生效录煤。
代碼如下：
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
class MyApp extends Component {
render() {
return (
<View style={{
flex:1,
flexDirection:'column',
justifyContent:'center',
alignItems: 'center'
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
效果如下：
代碼如下：
class MyApp extends Component {
render() {
return (
// 嘗試把 `flexDirection` 改為`column`
<View style={{
flex:1,
flexDirection:'column',
justifyContent:'center',
alignItems: 'stretch'
}}>
<View style={{ height: 50, backgroundColor: 'powderblue'}} />
<View style={{ height: 50, backgroundColor: 'skyblue'}} />
<View style={{ height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
效果如下：
以下是另外的布局方式
