React-Native之flexBox

因为之前的原因，换了一份工作，在新公司目前暂时应该是负责大前端的开发的工作。重新学习了一下JS语法，可能以后的变化的过程就是从Java转到了JS开发了。闲话少说，今天的重点在于介绍FlexBox布局在React-Native中的使用。

先说两句，1. 因为之前做Android开发所以在介绍中会做类比，其实你会发现界面的显示其实都大同小异。2 . Flex其实是用在前端的页面显示，在React-Native的界面中其实只是部分支持Flew的属性。

我们大体将属性分为两种 一种为容器（Group）属性，另外一种为视图(View)属性 ，一般来说View主要是作为容器的子布局。

• 4种容器属性
  1. alignItems
  2. flexDirection
  3. flexWrap
  4. justifyContent
• 2种视图布局
  1. flex
  2. alignSelf

首先介绍容器属性

flexDirection : 在React-Native中 默认属性为colum 主要指向主线轴的排列方向。

• row 横向方向
• column 默认 垂直方向

justifyContent: 表示伸缩容器在 主线轴上的对齐方式

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

alignItems：表示view在伸缩容器在交叉轴上的对齐方式

• flex-start
• flex-end
• center
• stretch

flexWrap； 表示容器在主线轴如果空间不足的时候 是否换行

• wrap 换行
• nowrap 不换行

接下来为视图属性

flex: 表示的是容器所占父容器的百分比

• number 默认为1 表示占据父容器的所有多余空间

algnSelf：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

• auto 按照自己的宽高来显示
• flex-start view在交叉轴的开始位置对齐
• flex-end View在交叉轴的结束位置来对齐
• center 居中
• stretch 拉升铺满 交叉轴的剩余空间