react-native flexbox布局

这里就重点说明一下flexbox 一些知识点。

https://reactnative.cn/docs/0.42/layout-with-flexbox.html

这篇文章讲的很好了，我这边就简单的总结一下了

首先我们要了解一个概念主轴和侧轴。

主轴就是布局从轴的起始方向到指定方向依次布局，侧轴就是主轴方向布局满了，从侧轴方向依次布局

如上图所示布局就应该是先从左向右布局，满了就到第二排，又继续从左到右布局

 

一般来说布局的存放在StyleSheet.create单独的创建的对象中(统一,比较好管理)，当然样式你可以在代码中修改，布局来说我们常用到了

flexDirection、alignItems和 justifyContent

1.flexDirection:row|column

为row的话主轴就是从左向右

为colum就是从下往上

2.Justify Content 元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

flex-start 默认在主轴的开始依次布局

flex-end  默认在主轴的结束依次布局 例如上图就是 从最右边依次向左边布局

space-around：表示单个元素周边的间距

space-between表示两个元素之间  和space-around都是等比分割的，

3.alignItems可以决定其子元素沿着侧轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

stretch：你可以认为是全填充的意思，属性赋值了width或者是height的话，stretch将无效，类似安卓的match

 

补充，1.这里要说一下flex这个属性，类似于安卓的weight，

flex的值越大分到的布局就越大，如果4个页面要分成4等份，那个flex的值都要相等。

值越小，分到的就越小，以row为例

宽度 = 总宽度*（flex/总flexsum）

2.在flexDirection ，alignitems我们可能会有一些元素要搞特殊这个时候我们用到了alignSelf

在开发实例中flexDirection是用的最多最多的

3.有时候布局需要搞特殊，不遵守这些规则 ，我们用到了position: 'absolute'这个东西