转载请注明出处：王亟亟的大牛之路
上一篇讲了State (状态)，Style（样式）：http://www.jb51.cc/article/p-ratxygrf-w.html
这一篇我们讲位置与尺寸，这些都捯饬好我们就可以搭完整的界面啦！！！
继续安利下我的收纳库，包你满意:https://github.com/ddwhan0123/Useful-Open-Source-Android
废话不说，继续学习
素材源于：https://facebook.github.io/react-native/docs/flexbox.html
Height and Width
先讲简单的长宽
在安卓里我们用 dp sp 等等等来设置控件的大小（这里的大小是长+宽，本身就是个“方”的，iOS的PX同理）
而在RN，也是同样，在style里设置width和height属性就行了，区别就是 不需要单位，不需要单位，不需要单位重要的事情说三次，他不需要我们给出像素点大小，他有自己的一个对屏幕适配的换算，做过WEB前端的很能理解这一概念（省事了，适配的事少了不少）
使用起来很简单，像这样
<View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} />
这个View是一个 50长 50宽 powderblue颜色的方块
但是即便如此这并不足以满足我们实际的开发要求，诸如 “权重”的概念，所以 Flex Dimensions 孕育而生,来看下文字解释
当一个控件的样式里有flex属性之后他就是一个可以伸缩挤压伸展的控件了。
当 flex:1的时候他会充满所有的空闲区域，如果一个试图组里面有多个flex:1的子控件，那么他们会平分这个试图组。
但是如果有一个大于其他诸如
2 ：1
1 : 10
什么的，那么就会按照比值大小来分配尺寸,诸如安卓的 Layout_weight
Layout with FlexBox
flexBox规则来指定某个组件的子元素的布局,官方提供了3种属性来帮我们完成我们的布局工作，分别是 flexDirection、alignItems和 justifyContent。
flexDirection
类似于安卓的相对布局，默认为 垂直向（column）,也可以设置为，水平向(row).
我们来整个例子看看
import React,{ Component } from 'react'; import { AppRegistry,Text,View } from 'react-native'; class RNLearnPro extends Component { render() { return( <View style={{flex:1,flexDirection :'column'}}> <View style={{width :50,height :50,backgroundColor: '#aa1122'}} /> <View style={{width :50,backgroundColor: '#bbaa22'}} /> <View style={{width :50,backgroundColor: '#c1cc22'}} /> </View> ); } } AppRegistry.registerComponent('RNLearnPro',() => RNLearnPro);
效果：
那再换row模式下
只需要替换 <View style={{flex:1,flexDirection :'row'}}>
Justify Content
类似于 安卓的相对布局里控制位置关系的 “居中，水平居中，垂直居中”等，我们来一个个看他们的实现效果
<View style={{ flex: 1,flexDirection: 'column',justifyContent: 'center',}}> <View style={{width :50,backgroundColor: '#c1cc22'}} /> </View>
flex-start 模式：(默认值)
默认样式同样的效果，子控件相互紧挨着沿着左上方排列
center模式：
控件位于Height位置的正中间，靠左对齐
flex-end模式：
控件位于Height位置的最下面，靠左对齐
space-around模式：
子控件会均匀地分布在父容器里，左对齐.
space-between模式：
子控件会均匀地分布在父容器里，左对齐,第一个项顶top,最后项顶Bottom.
Align Items
这是一个和Justify Content相对应的属性，在flexDirection :'column' 的大环境下 Justify Content使得我们的子控件都是左对齐 也就是操控的都是 Y向的位置，而X向就由Align Items来处理。
在二维的屏幕概念里，X,Y坐标同时出现就能使“直线变成点”。
我们看下在Y向默认时，X向发生变化对UI有什么影响
flex-start模式：(默认时)
左上角对齐
center模式：
X 居中，Y最上方
flex-end模式：
Y轴还是最上方，X轴最右
stretch模式：
这是一个最特别的模式，也就是和安卓的match_parent模式类似，前提是控件的宽必须没有固定尺寸，不然将失去效果，像例子的2个黄色View那样
<View style={{ flex: 1,alignItems: 'stretch',}}> <View style={{height :50,backgroundColor: '#c1cc22'}} /> </View>
