React Native 布局 justifyContent、alignItems、alignSelf、alignContent

针对justifyContent、alignItems、alignSelf、alignContent这几个属性，

我们经常使用的是justifyContent、alignItems，我们可以了解下alignSelf、alignContent

flexDirection

谈到布局我们从原生讲起，在iOS的世界里我们是有X轴、Y轴的，

那么在React Native的世界里对应的就是flexDirection属性，

flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";

它是有row（行，我们可以和X轴对应，水平方向）、column（列，我们可以和Y轴对应，垂直方向），

flexDirection决定了子控件的排列方向，也就决定了主次轴，

如果是row那么X轴就是主轴，Y轴就是次轴（侧轴），如果是column那么Y轴就是主轴，X轴就是次轴（侧轴）。

我们的justifyContent和alignItems就是参照于主次轴的，justifyContent参照主轴，alignItems参照次轴。

换言之justifyContent和alignItems依赖于flexDirection，离开了flexDirection，两者也就没有了意义。

justifyContent

我们经常使用justifyContent来调整子控件，这个值主要是控制主轴的，简单通过示例来了解下它的几个属性

justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";

默认是flex-start，效果如图：

flex-end

center

space-between（两端对齐平分，空白两等分）

space-around（单个元素左右间距相同，空白六等分）

space-evenly（从左向右等间距平分，空白四等分）

代码如下：

                <View style={style.btn_bg}>
                    <TouchableOpacity onPress={() => {


                    }}>
                        <View style={style.btn_blue}>
                            <Text style={style.btn}>测试一下下</Text>
                            <Text style={style.btn}>测试一下下</Text>
                            <Text style={style.btn}>测试一下下</Text>
                        </View>
                    </TouchableOpacity>
                </View>


    btn_bg: {
        backgroundColor: 'yellow',
        paddingHorizontal: 15,
        paddingVertical: 8,
    },

    btn_blue: {
        backgroundColor: '#3480FF',
        height: 40,
        borderRadius: 20,
        justifyContent: 'space-evenly',
        flexDirection:'row',
        alignItems:'center',
    },

    btn: {
        fontSize: DeviceHelp.fontSize(16),
        color: '#FFFFFF',
        backgroundColor: 'red',
    },

综上所述：

space-between、space-around、space-evenly对于两个以上组件才有意义。

我们也可以通过space-between来实现左右两端布局。

设置不同的属性值时，子控件的填充大小是不一样的

alignItems

我们经常使用alignItems来调整子控件，这个值主要是控制次轴的

type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
alignItems?: FlexAlignType;

下面通过示例看下几个属性

alignContent（使用较少）

alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";

alignContent的布局效果和alignIems相似，

alignContent只对多行的item才有效果，而alignIems对单行、多行都有效,

一般我们使用较少，使用alignIems较多

alignSelf（使用较少）

type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
alignSelf?: "auto" | FlexAlignType;

alignSelf区别于alignItems的是，

alignSelf是在item内部定义的，它的默认取值是auto，向上取父类alignItems的值，

如果对alignSelf属性的值进行自定义则会覆盖父类的效果

参考资料：https://blog.csdn.net/qq_28978893/article/details/78855709