flexDirection
flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。
row: 从左向右依次排列
row-reverse: 从右向左依次排列
column(default): 默认的排列方式，从上向下排列
column-reverse: 从下向上排列
Usage:
<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>1</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>2</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>3</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>4</Text>
</View>
</View>
flexWrap
flexWrap enum('wrap', 'nowrap')
flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。
nowrap: flex的元素只排列在一行上，可能导致溢出。
wrap :flex的元素在一行排列不下时，就进行多行排列。
Usage:
<View style={ {flexWrap:'wrap',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
justifyContent
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
Usage:
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
alignItems
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。（不指定宽高）
Usage:
<View style={ {alignItems:'center',flexDirection:'column',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
flex
flex number flex 属性定义了一个可伸缩元素的能力，默认为0。
Usage:
<View style={ {flexDirection:'row',height:40, backgroundColor:"gray"}}>
<View style={ {flex:1,backgroundColor:"orange",margin:5}}>
<Text style={ {fontSize:16}}>flex:1</Text>
</View>
<View style={ {flex:2,backgroundColor:"orange",margin:5}}>
<Text style={ {fontSize:16}}>flex:2</Text>
</View>
<View style={ {flex:3,backgroundColor:"orange",margin:5}}>
<Text style={ {fontSize:16}}>flex:3</Text>
</View>
</View>
padding
padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 左内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距
usage
<View style={{alignItems:'center', justifyContent:'center'}}>
<View style={{backgroundColor:'orange'}}>
<Text style={[{color:'#0099ff',fontSize:16},{padding: 20}]}>{'padding:20'}</Text>
</View>
</View>
<View style={{alignItems:'center', justifyContent:'center'}}>
<View style={{marginTop:20,backgroundColor:'orange'}}>
<Text style={[{color:'#0099ff',fontSize:16},{padding: 0}]}>{'padding:0'}</Text>
</View>
</View>
<View style={{alignItems:'center', justifyContent:'center'}}>
<View style={{marginTop:20,backgroundColor:'orange'}}>
<Text style={[{color:'#0099ff',fontSize:16},{paddingTop:10,paddingLeft:20,paddingBottom: 30,paddingRight: 40}]}>{'top:10;left:10;bottom:30;right:40'}</Text>
</View>
</View>
边缘
left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
usage
<View style={{height:200,alignItems:'center',justifyContent:'center',backgroundColor:'gray'}}>
<View style={{width:50,height:50,backgroundColor:'orange',right:100}}/>
<View style={{width:50,height:50,backgroundColor:'orange',left:0}}/>
<View style={{width:50,height:50,backgroundColor:'orange',left:100}}/>
</View>
position
position enum(‘absolute’, ‘relative’)属性设置元素的定位方式，为将要定位的元素定义定位规则。
absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 Left 位置添加 20 像素。
usage
<View style={{width:60,height:60,backgroundColor:'orange'}}>
<Image style={{width:60,height:60}} source={require('../../Image/icon_testImage.png')}/>
<View style={{width:10,height:10,borderRadius:5,backgroundColor:'darkgray',position:'absolute',top:10,right:10}}/>
</View>
Image组件相关
resizeMode
决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。
center: 居中不拉伸。
