我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。
- 一般来说，使用
flexDirection,alignItems和justifyContent
三个样式属性就已经能满足大多数布局需求。
direction [dɪˈ rek ʃn] 方向；指导；趋势
align [ə' laɪn] 排列；排成一行
justify ['dʒʌ stə' fai] 整理版面
content [kən' tent] 内容，容量
译注：这里有一份简易布局图解，可以给你一个大概的印象。
Flex Direction
column ['kɒləm] 纵队，列
row [rəʊ] 行，排
reverse [rɪ'vɜːs] 相反
React Native 中的 Flexbox 的工作原理和 web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection 的默认值是 column 而不是row，而 flex 也只能指定一个数字值。
在组件的 style 中指定 flexDirection 可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(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 可以决定其子元素沿着主轴的排列方式。
子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：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，可以决定其子元素沿着 次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：flex-start、center、flex-end 以及 stretch。
stretch [stretʃ] 伸展,张开；
注意：要使 stretch 选项生效的话，子元素在次轴方向上不能有固定的尺寸。
以下面的代码为例：
只有将子元素样式中的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>
);
}
}
效果如下：
以下是另外的布局方式
