WOODONCHAN

Flexbox 布局

flexbox是React Native 应用开发中必不可少的内容,同样也是我们经常使用的内容,我们使用flexbox规则来指定某个组件的子元素的布局,flexbox可以保证在不同屏幕尺寸上提供一致的布局结构。下面我们将会对flexbox的基础知识进行详细的介绍。

在日常开发中我们使用 flexDirectionjustifyContentalignItems这三种样式属性就已经能满足绝大部分布局需求了。

FlexDirection

在组件style中指定flexDirection可以决定父布局中子布局的主轴。row和column决定着子布局是沿着水平轴方向排列,还是沿着竖直轴方向排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
export default class Test extends Component {
render() {
return (
// 尝试修改 flexDirection 的值,改为 row、column 属性值
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 100, height: 100, backgroundColor: 'lightpink'}}/>
<View style={{width: 100, height: 100, backgroundColor: 'lightsalmon'}}/>
<View style={{width: 100, height: 100, backgroundColor: 'lightseagreen'}}/>
</View>
);
}
}
AppRegistry.registerComponent('Test', () => Test);

JustifyContent

在组件的style中设置justifyContent属性可以控制子元素沿着主轴的排列方式,属性值分别有 flex-startcenterflex-endspace-aroundspace-between

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
export default class Test extends Component {
render() {
return (
// 尝试修改 justifyContent 的值,改为 flex-start、center、flex-end、space-around、space-between属性值
// 尝试修改 flexDirection 主轴方向
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
<View style={{width: 100, height: 100, backgroundColor: 'lightpink'}}/>
<View style={{width: 100, height: 100, backgroundColor: 'lightsalmon'}}/>
<View style={{width: 100, height: 100, backgroundColor: 'lightseagreen'}}/>
</View>
);
}
}
AppRegistry.registerComponent('Test', () => Test);

AlignItems

在组件的style中设置alignItems属性可以改变其子元素沿着次轴的排列方式(例如主轴方向为row,次轴方向为column的排列方式)属性值分别有:flex-startcenterflex-endstretch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
export default class Test extends Component {
render() {
return (
// 尝试修改 alignItems的值,改为 flex-start、center、flex-end、stretch
// 尝试修改 justifyContent 以及 flexDirection的值
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 100, height: 100, backgroundColor: 'lightpink'}} />
<View style={{width: 100, height: 100, backgroundColor: 'lightsalmon'}} />
<View style={{width: 100, height: 100, backgroundColor: 'lightseagreen'}} />
</View>
);
}
}
AppRegistry.registerComponent('Test', () => Test);