RN中Flexbox布局使用记录

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

Flex Direction

在组件的style中的flexDirection决定主轴的方向，其中默认为column为竖直方向，row为横平方向,row-reverse是逆向的横平方向，column-reverse是逆向的竖直方向
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{flex: 1,flexDirection:'column'}}>

Justify Content

<View style={{flex: 1,
          flexDirection:'column',
          justifyContent:'flex-start',
      }}>

多图预警看图说话

flex-start
center
flex-end
space-around
space-between

Align Items

<View style={{flex: 1,
          flexDirection:'column',
          justifyContent:'center',
          alignItems:'flex-start',
      }}>

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

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

flex-start
center
flex-end
stretch