06.使用Flexbox布局

1.一般来说，使用flexDirection，alignItems状语从句：  justifyContent三个样式属性就已经能满足大多数布局需求。

1.1Flex方向   

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴（row）方向排列，还是沿着竖直轴（column）方向排列呢？默认值是竖直轴（column）方向。这句话的意思是父组件flexDirection决定子组件是按照父组件的x轴或者是y轴布局,默认是y轴.如果设置了column,那么子组件就是按照y轴排列,副轴也就变成了x轴.

 // 尝试把`flexDirection`改为`column`看看
            <View style={{flex: 1, flexDirection: 'row',justifyContent:'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>

1.2证明内容

在组件的样式指定中justifyContent可以决定其子元素沿着主轴的个结果排列方式子元素的英文应该网求靠近主轴的起始端的还是末尾段分布呢亦或应该均匀分布对应的这些柯林斯选项对话有：？？ ， ，，flex-start ， 以及。centerflex-endspace-aroundspace-betweenspace-evenly

1。flex-start

2.center

3。flex-end

4。space-around

5。space-between

 

更详细的讲解在下面的网址：

1.react native中文网

https://reactnative.cn/docs/flexbox/

2.FlexBox布局在RN中的基本用法

https://www.jianshu.com/p/4a61a517c792

3.布局属性:

https://reactnative.cn/docs/0.56/layout-props/