---------------------------------------------------------------------------------------------------
React.native是facebook开源的一套基于JavaScript的开源框架，
很方便用来开发移动设备的app。
而且，方便及时更新app的UI与数据，也很方便部署。
goodmao希望帮助大家迅速上手掌握！
----------------------------------------------------------------------------------------------------
参考：
样式Style：http://facebook.github.io/react-native/docs/view.html#style
视图View：http://facebook.github.io/react-native/docs/style.html#content
颜色参考：http://www.w3school.com.cn/html/html_colors.asp
源码参考：Layout.h/.c文件
----------------------------------------------------------------------------------------------------
我们这一节继续介绍UI的布局与样式 Style。
本节介绍下多个视图View的样式。
一、采用下面的例子来介绍：
//1.设置模式
'use strict';
//2.导入库
var React = require('react-native');
//3.定义变量添加依赖项
var {
AppRegistry,
StyleSheet,
View,
} = React;
//4.创建组件类
var HelloReact = React.createClass({
//组件的渲染方法
//设置视图 View
render: function() {
return (
<View style = {{backgroundColor: 'gray', width: 300, height:300, }}>
<View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
</View>
);
}
});
//5.注册
AppRegistry.registerComponent('HelloReact', () => HelloReact);
二、多个视图View的常用属性
（1）边缘距离
【区别】
margin：是本View视图边框，与其他视图（非子视图）的距离。
padding：是本View视图的内容（子视图），与本视图边框的距离。
1.距离其他视图（非子视图）的边线距离
属性：margin, marginTop, marginBottom, marginLeft, marginRight
类型：浮点数，可以为负数。
注意：若周围无其他视图，则是相对于父视图的边界线的距离
margin: 相对左边和顶部视图，左边和顶部的距离
marginTop: 相对上部视图，顶部的距离
marginBottom: 相对下部视图，底部的距离
marginLeft: 相对左边视图，左边的距离
marginRight: 相对右边视图，右边的距离
marginVertical: 同 marginTop
marginHorizontal: 同 marginLeft
2.设置子视图距离本视图的边线距离
属性：padding, paddingTop, paddingBottom, paddingLeft, paddingRight,paddingVertical, paddingHorizontal
类型：浮点数，可以为负数。
作用：同1，不同之处在于，所有paddingX的属性值，都是对当前视图的子视图而言的。
【示例】：
a.布局
var HelloReact = React.createClass({ //创建组件类
//组件的渲染方法
//设置视图 View
render: function() {
return (
<View style = {{backgroundColor: 'gray',
width: 300, height:300,
marginHorizontal: 50,
paddingLeft: 20,
paddingTop: 50,
flexDirection: 'row',
}}>
<View style = {{backgroundColor: 'blue', width: 50, height: 50}}/>
</View>
);
}
});
b.效果图
（2）子视图的排列
1.子视图的排列方向
属性：flexDirection
类型：字符串
取值：‘row‘ 按行排列；
‘column‘ 按列排列，默认是按列排列。
例如：flexDirection: ‘row‘,
2.子视图的对齐方式-垂直方向
属性：justifyContent 垂直方向
类型：字符串，
取值：‘center‘, 子视图垂直居中排列；
‘flex-end‘, 子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；
‘space-around‘, 子视图平均分布。
‘space-between‘, 子视图平均分布。两端保留子视图与子视图之间间距大小的一半。
例如：justifyContent: ‘center‘, //垂直居中
参考：http://caibaojian.com/flexbox-guide.html
http://caibaojian.com/demo/flexbox/justify-content.html
【示例】：
a.样式
同上例，参数：justifyContent: ‘flex-end‘
<View style = {{backgroundColor: 'gray',
width: 300, height:300,
top: 20,
flexDirection: 'row', //按行
justifyContent: 'flex-end', //子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）
}}>
<View style = {{backgroundColor: 'blue', width: 50, height: 50}}/>
<View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
<View style = {{backgroundColor: 'green', width: 50, height: 50}}/>
</View>
b.效果
【示例】：
a.样式
同上例，参数：justifyContent: ‘space-between‘, //平均分布
b.效果
【示例】：
a.样式
同上例，参数：justifyContent: ‘space-around‘, //平均分布
b.效果
3.子视图的对齐方式-水平方向
属性：2-alignItems 水平方向
类型：字符串，
取值：‘center‘, 子视图居中排列；
‘flex-end‘, 子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；
‘stretch‘, 子视图被拉伸
例如：alignItems: ‘center‘, //水平居中
【示例】：
a.样式
同上例，参数：
flexDirection: ‘column‘, //按列
alignItems:‘center‘, //子视图居中排列；
b.效果
a.样式
同上例，参数：
flexDirection: ‘column‘, //按列
alignItems:‘flex-end‘, //子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；
b.效果
a.样式
<View style = {{backgroundColor: 'gray',
width: 300, height:300,
top: 20,
flexDirection: 'column', //按列
alignItems: 'stretch', //子视图被拉伸
}}>
<View style = {{backgroundColor: 'blue', height: 50}}/>
<View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
<View style = {{backgroundColor: 'green', width: 50, height: 50}}/>
</View>
b.效果
注意：对应的子视图，不设置宽度 width，则会被拉伸。
注意：对应的子视图，如果设置了width: 50，所以不会被拉伸。
注意：若方向修改为按行排列row，则没有设置高度的子视图，会将高度拉伸
a.样式
<View style = {{backgroundColor: 'gray',
width: 300, height:300,
top: 20,
flexDirection: 'row', //按列
alignItems:'stretch', //子视图被拉伸
}}>
<View style = {{backgroundColor: 'blue', width: 50, }}/>
<View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
<View style = {{backgroundColor: 'green', width: 50, height: 50}}/>
</View>
b.效果
---------------------------------------------
补充说明：
React中的样式属性，跟CSS中的有所不同，
可以查看官方文档，
也可以直接看源码：
文件位置：React.xcodeproj项目中，React->Layout->Layout.c
注意：视图View的所有属性，可以参看源码分析
或者参考文档说明：React-Doc-View
<View>
在RCTView.h源码中，可以看到：RCTView继承了UIView
Valid keys: [
"width",
"height",
"top",
"left",
"right",
"bottom",
"margin",
"marginVertical",
"marginHorizontal",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"padding",
"paddingVertical",
"paddingHorizontal",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"borderWidth",
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"position",
"flexDirection",
"flexWrap",
"justifyContent",
"alignItems",
"alignSelf",
"flex",
"transform",
"transformMatrix",
"rotation",
"scaleX",
"scaleY",
"translateX",
"translateY",
"backgroundColor",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"borderRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"opacity",
"overflow",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius"
]