React Native-Flexbox布局使用总结

前言：
最近在学习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属性的奥妙之处。