前言：
最近在学习RN（React Native），一开始被他的跨平台和热更新的特性所吸引，在Android和iOS平台上90%的代码可以通用，出现问题后重新发布离线包即可动态修复。RN使用flexbox模型布局，下面讲讲我在使用flexbox布局的一些总结。
1. 容器、主轴和交叉轴是什么？（此处参考阮一峰老师的文章）
flexbox（弹性盒）是W3C提出的UI设计模型规范的一种实现，RN实现了其中大部分功能。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
image
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2. 容器属性
我们可以为每个容器添加特定的样式，我们使用StyleSheet.create的方式来添加样式，StyleSheet会自动为我们检查样式的合法性。
2.1 决定位置的键：
position：relative、absolute。表示位置是相对还是绝对。
top、bottom、left、right：他们得单位是pt。absolute（绝对）表示相对于父组件的位置，relative（相对）表示距离上一个同级组件的位置。
2.2 决定子组件排列规则的键：
flexDirection：row、row-reverse、column、column-reverse，分别代表横向从左到右、横向从右到左、纵向从上到下、纵向从下到上。
flexWrap：wrap、nowrap。表示在子组件排列时超过屏幕宽度后是否会自动换行。
justifyContent：flex-start、flex-end、center、space-between、space-around。表示在一个方向上如何排列子组件。简单解释分别是：靠左排列，靠右排列、居中、填满居中、均匀居中。
alignItem：flex-start、flex-end、center、stretch，代表子组件的对其规则，也就是子组件的交叉轴上排列方式，分别是：顶部对齐、底部对齐、中部对齐、拉长对齐。
2.3 决定组件显示规则的键：
flex：按flex的值的比例去分配据所剩余的空间。
alignSelf：flex-start、flex-end、center、stretch，代表子组件的对其规则，也就是子组件的交叉轴上排列方式，分别是：顶部对齐、底部对齐、中部对齐、拉长对齐。对应父组件alignItem的值，该属性可覆盖父组件alignItem的值。
border（边框）、margin（空隙）、padding（填充）：具体方位上的高度可以单独指定类似：borderTopWidth、borderRightWidth...
3. 掌握了上述基本属性可以进行UI界面的排列，下面有一个例子：
image
要实现这样一个布局，需要灵活的用到我们的容器属性。
import React, {Component} from 'react'
import {
View,
StyleSheet,
} from 'react-native';
export default class Practice extends Component {
static navigationOptions = {
title: '骰子布局',
};
render() {
return (
<View style={styles.container}>
<View style={styles.round_center}>
<View style={styles.point_center}/>
</View>
<View style={styles.round_white_sb}>
<View style={styles.point_start}/>
<View style={styles.point_end}/>
</View>
<View style={styles.round_white_sb}>
<View style={styles.point_start}/>
<View style={styles.point_center}/>
<View style={styles.point_end}/>
</View>
<View style={styles.round_column_sb}>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
</View>
<View style={styles.round_column_sb}>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
<View style={styles.round_sb}>
<View style={styles.point_center}/>
</View>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
</View>
<View style={styles.round_column_sb}>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_end}/>
</View>
<View style={styles.round_row_sb}>
<View style={styles.point_start}/>
<View style={styles.point_start}/>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// alignItems: 'center',
backgroundColor: 'black',
flexDirection: 'row',
flexWrap: 'wrap',
},
round_row_sb: {
flexDirection: 'row',
justifyContent: 'space-between',
},
round_center: {
backgroundColor: 'white',
borderRadius: 10,
width: 100,
height: 100,
margin: 30,
justifyContent: 'center',
},
round_white_sb: {
backgroundColor: 'white',
borderRadius: 10,
width: 100,
height: 100,
margin: 30,
justifyContent: 'space-between',
},
round_sb: {
justifyContent: 'space-between',
},
round_column_sb: {
backgroundColor: 'white',
borderRadius: 10,
width: 100,
height: 100,
margin: 30,
flexDirection: 'column',
justifyContent: 'space-between',
},
point_center: {
backgroundColor: 'black',
width: 22,
height: 22,
borderRadius: 11,
alignSelf: 'center',
},
point_start: {
backgroundColor: 'black',
width: 22,
height: 22,
borderRadius: 11,
alignSelf: 'flex-start',
margin: 5,
},
point_end: {
backgroundColor: 'black',
width: 22,
height: 22,
borderRadius: 11,
alignSelf: 'flex-end',
margin: 5,
},
});
以上是我的实现方案，真正动手完成布局才能体会到flexbox属性的奥妙之处。
网友评论