前言

通过上一篇的学习，我们可以了解到RN的基本开发模式，在你开始这篇文章之前，建议你先将上一篇的内容给多敲几遍，尽量能够做到自己单独敲出来一个组件以及样式表。其他废话就不多说了，接下来介绍我们本篇的内容：

一、体验FlexBox布局

我们之前做的web布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，指在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。
上面说的是官话，说实话我刚看到上面的解释也是一脸懵逼，等你正在懂了什么叫弹性布局，你再回来看这段话，你会发现还是一脸懵逼。下面我使用使用iOS的布局方式、HTML的布局方式，RN的弹性布局方式，实现如下效果。通过对比的方式首先来让大家体验一下弹性布局。

不懂iOS开发的可以直接跳过,这里仅仅是让iOS开发人员做对比

iOS的布局方式.png

这个看不懂的自行学习去

RN布局方式.png

HTML方式首先要做的是设置html和body的宽和高是100%，然后在设置父元素的高宽为100%,RN只需设置父组件的组件的样式属性flex为1
HTML设置水平方向的居中方式是把需要居中的子元素都设置为margin：0 atuo，RN只需父组件的样式属性justifyContents:"center"，便可实现父组件中所有的子组件都水平居中
HTML设置垂直居中方式是子元素设置margin:auto;postion:absolute;top:0;left:0;bottom:0;right:0;并且该子元素要设置宽和高，RN只需父组件的样式属性alignItems:"center"，便可实现所有的子组件都垂直居中
上面RN的布局方式就是我们上面提到的FlexBox布局也叫作弹性盒模型。可以不仅大大减少我们布局的代码量，而且使我们的布局逻辑更加清晰。

父组件让子组件能够改变他的宽高，以最佳方式来填充可用空间。

每个组件默认存在两根轴

flexDirection详解

justifyContent - 定义该组件的所有子组件在主轴线的对其方式
- flex-start: 组件的子组件向主轴的起始位置靠齐
- flex-end: 组件的子组件向主轴的结束位置靠齐
- center: 组件的子组件向主轴的中间位置靠齐
- space-between: 组件的子组件向主轴的两端对齐，项目之间的间隔都相等
- space-around:组件的子组件平均的分布主轴，两端保留子组件间隔的一半。
justifyContent详解

alignItems - 定义该组件的所有子组件在侧轴线的对其方式
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- stretch:如果项目未设置高度或者auto,将占满整个容器的高度
  
  alignItems详解
flexWrap - 让组件的子组件都排在一条线
- nowrap(默认值)：不换行
- wrap: 换行
注：如果设置wrap不起作用，是因为版本的问题，此时只需给他设置一个alignItems属性

flex-wrap.jpg

flex - 设置组件的宽度，高度默认100%

11.png

下面我解释一下上面图的原理
- 上图红色是父组件，宽度为350，他的子组件分别是粉色、橘黄色、蓝色、灰色。
- 灰色的宽是固定50，此时红色剩余的可用宽度为350-50=300
- 其他三个色块都是通过flex来设置宽度，他们的flex分别是1,2,3,此时表明，粉色、橘黄色、绿色他们要分掉红色剩余的宽度。

- 分的方式如下：把300分成7(三个色块的flex值相加)份，粉色占1份，橘黄色占2份，绿色占3份。

alignSelf - 设置某个子组件在侧轴的对齐方式
- 可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- auto/flex-start/flex-end/center/stretch

首先需要获取到系统的Dimensions类库
var dimensions = require("Dimensions");
通过ES6的结构赋值获取值(不懂结构赋值的自行百度啊)
var {width,height} = dimensions.get("window");
或者通过ES5来获取
var width = dimensions.get("window").width;
var height = dimensions.get("window").height;

与CSS的定位基本一直，下面我主要提一下不同的地方