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
, 以及。center
flex-end
space-around
space-between
space-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.布局属性: