react native布局小知识之主次轴，排列方式

react native布局小知识之主次轴，排列方式

在react native中，我们使用方便快捷的Flex Box来实现页面的布局，在这里我总结了几个点让我们能更加好的理解：主轴，次轴；以及在组件View 和Text中默认的子组件布局顺序：

主轴与次轴和屏幕的横竖并没有关系：

在布局中有的人以为主轴就是竖直向下的轴，横轴就是水平向右的轴，其实主此轴是可变的，那么根据什么变呢，我的总结是：

一 . 根据当前组件的默认子组建布局方式判断：

1：若当前组件是View，那么它子组件的默认排列方式是竖直向下的，也就是他的flexDirection属性默认是column，那么它的主轴就是向下的这个轴，次轴就是横着的轴（垂直主轴的轴叫做次轴）。
2.若当前组件是Text，那么它的子组件的默认排序方式是水平向右的，也就是他的flexDirection属性默认是row，那么他的主轴就是水平轴，次轴就是竖直于主轴的轴。

二 . 根据当前组件的 flexDirection 属性进行判断：

只需要记住主轴就是平行于flexDirection属性的轴且不论这个属性是默认的还是自己写的样式；
注意：Text组件不能包裹在View组件外边，这样会报错。
精简判断方式：看当前的主轴次轴以及布局排列方式，主要瞅准一个属性那就是flexDirection；如果组件没写这个属性，那么他们的 flexDirection属性就按默认的值考虑；View默认值为column，Text的默认值就是row（一般布局就用这俩兄弟），排列方式则是平行于主轴依次排列。