React Native布局
React Native中布局采用的是FleBox(弹性框)进行布局。在React Native中，有4个容器属性，2个项目属性，分别是：
容器(父视图)属性：flexDirection flexWrap justifyContent alignItems
项目(子视图)属性：flex alignSelf
1、flexDirection容器属性: `row | row-reverse | column | column-reverse`,默认为：'column'
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <View style={styles.viewSize}> <Text style={ {fontSize:16}}>1</Text> </View> <View style={styles.viewSize}> <Text style={{fontSize:16}}>2</Text> </View> <View style={styles.viewSize}> <Text style={{fontSize:16}}>3</Text> </View> <View style={styles.viewSize}> <Text style={{fontSize:16}}>4</Text> </View> <View style={styles.viewSize}> <Text style={{fontSize:16}}>5</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flexDirection: 'row', backgroundColor: 'gray', marginTop:30 }, viewSize:{ width:40, height:40, backgroundColor:'purple', margin:5 } });
我们先把flexDirection设置为row，结果：
设置为row-reverse就是反着的
设置为column：
2、flexWrap容器属性: `nowrap | wrap `
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
2.1 nowrap(默认值)：不换行:
2.2 wrap：换行，第一行在上方
3:justifyContent容器属性:`flex-start | flex-end | center | space-between | space-around` ,定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
4、alignItems容器属性:`flex-start | flex-end | center | baseline | stretch`定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐 。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
5、alignSelf项目属性:“auto | flex-start | flex-end | center | baseline | stretch”。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
6、flex项目属性，number，比例。
7、其他布局
7.1、视图边框
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 个方向边框的颜色
borderColor 边框颜色
