RN中Flexbox布局使用记录

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

Flex Direction

在组件的style中的flexDirection决定主轴的方向，其中默认为column为竖直方向，row为横平方向,row-reverse是逆向的横平方向，column-reverse是逆向的竖直方向

Justify Content

多图预警看图说话

flex-start

center

flex-end

space-around

space-between

Align Items

多图预警看图说话
组件的style中指定alignItems可以决定子元素沿着次轴的排列方式

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。

flex-start

center

flex-end

stretch