React Native布局知识详解

##########
在React Native中布局采用的是FlexBox（弹性框）进行布局。
FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，
目前还处于最终征求意见稿阶段，并不是所有的浏览器都支持FlexBox，但大家在做React Native开发时
不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBox布局，那么React Native对
FlexBox的支持自然会做的很好。

#################
在React Native中尺寸是没有单位的，它代表了设备独立像素。
<View style={{width:100,height:100}}>
    <Text style={{fontSize:16}}>尺寸</Text>
</View>
上述代码，运行在Android上时，View的长和宽被解释成:100dp 100dp 单位是dp
字体被解释成: 16sp 单位是sp
运行在IOS上时尺寸单位被解释成了pt
这些单位确保了布局在任何不同dp的手机屏幕上显示不会发生改变

##############
React Native中的FlexBox 和 Web CSS上的FlexBox工作方式是一样的。但有些地方还是有出入的。
React Native中的FlexBox和Web CSS上FlexBox的不同之处
* flexDirection:React Native中默认为flexDirection:'column',在Web CSS中默认为flex-direction:'row'
* alignItems:React Native中默认为alignItems:'stretch',在Web CSS中默认align-items:'flex-start'
* flex:相比Web CSS的flex接受多参数，如 flex: 2 2 10%; , 但在React Native中flex只接受一个参数
* 不支持属性：align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink

父视图属性（容器属性）
flexDirection: 定义了父视图中的子元素沿横轴或侧轴的排列方式
    row： 从左向右依次排列
    column： 默认的排列方式，从上向下排列
    row-reverse：从右向左依次排列
    column-reverse：从下向上排列
flexWrap:定义了子元素在父视图内是否允许多行排列，默认为nowrap
    wrap:flex的元素只排列在一行上，可能导致溢出
    nowrap:flex的元素在一行排列不下时，就进行多行排列
justifyContent: 定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间。默认为flex-start
    flex-start：从行首开始排列，每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐
    flex-end：从行尾开始排列，每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
    center：伸缩元素向每行中点排列，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
    space-between：在每行上均匀分配弹性元素，相邻元素间距离相同，每行第一个元素与行首对齐，每行最后一个元素与行尾对齐
    space-around：在每行上均匀分配弹性元素，相邻元素间距离相同，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
alignItems: 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch
    flex-start：元素向侧轴起点对齐
    flex-end：元素向侧轴终点对齐
    center：元素在侧轴居中，如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同
    stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度

子视图属性
alignSelf: 属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf属性可重写灵活容器的alignItems属性
    auto: 默认auto,元素继承了它的父容器的align-items属性，如果没有父容器则为stretch
    stretch:元素被拉伸以适应容器
    center:元素位于容器的中心
    flex-start:元素位于容器的开头
    flex-end:元素位于容器的结尾

flex：属性定义了一个可伸缩元素的能力，默认为0

#####################################
其他布局 in React Native
以下属性是React Native所支持的除Flex以为的其它布局属性
视图边框
    borderBottomWidth：底部边框宽度
    borderLeftWidth：左边框宽度
    borderRightWidth：右边框宽度
    borderTopWidth：顶部边框宽度
    borderWidth：边框宽度
    border<Bottom  Left  Right  Top>Color 方向边框的颜色
    borderColor：边框颜色
尺寸
    width
    height
外边距
    margin：外边距
    marginBottom：下外边距
    marginHorizontal：左右外边距
    marginLeft：左外边距
    marginRight：右外边距
    marginTop：上外边距
    marginVertical：上下外边距
内边距
    padding:内边距
    paddingBottom 下内边距
    paddingHorizontal：左右内边距
    paddingLeft:左内边距
    paddingRight:右内边距
    paddingTop：上内边距
    paddingVertical：上下内边距
边缘
    left：属性规定元素的左边缘，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移
    right：属性规定元素的右边缘，该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
    top：属性规定元素的顶部边缘，该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
    bottom：属性规定元素的底部边缘，该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移
定位
    absolute：生成绝对定位的元素，元素的位置通过,left,top,right,bottom属性进行规定
    relative：生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加20像素