簡介
我們在React Native中使用flexbox規(guī)則來指定某個組件的子元素的布局悯恍。Flexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。相對于Native開發(fā)的布局更加快捷方便。
Flexbox使用flexDirection次泽、alignItems和 justifyContent三個樣式屬性就已經(jīng)能滿足大多數(shù)布局需求
flexDirection
flexDirection可以決定zu jian組件布局的主軸，子元素會沿著主軸排列，或水平或垂直规求。
flexDirection的默認值是豎直軸（column）方向
column（默認）
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
column-reverse
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'column-reverse'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
row
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
row-reverse
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'row-reverse'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
justifyContent
在組件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢卵惦？亦或應(yīng)該均勻分布阻肿？對應(yīng)的這些可選項有：flex-start、center沮尿、flex-end丛塌、space-around以及space-between较解。
flex-start
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'flex-start'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
center
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
flex-end
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'flex-end'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
space-around
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
space-between
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'space-between'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
alignItems
在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向為row赴邻，則次軸方向為column）的排列方式印衔。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布姥敛？對應(yīng)的這些可選項有：flex-start奸焙、center、flex-end以及stretch彤敛。
flex-start
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
center
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
flex-end
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
stretch
注意：
要使stretch選項生效的話与帆，子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例：只有將子元素樣式中的width: 50去掉之后臊泌，alignItems: 'stretch'才能生效鲤桥。
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch'}}>
<View style={{height: 50, backgroundColor: 'red'}} />
<View style={{height: 150, backgroundColor: 'green'}} />
<View style={{height: 100, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
這里寫圖片描述
