概述
在我们使用React-Native的时候，最主要的方面是对界面UI组件的编写。React-Native采用了FlexBox的布局方式，FlexBox全称Flexible Box，是CSS3中的一种布局方式，可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为。可以看出，FlexBox可以在不同尺寸的屏幕上保持几乎一致的布局行为，这一点对于在碎片化严重的Android机型上尤为重要。
FlexBox属性分类
FlexBox所使用的属性可以大致分为四类：
- 位置，宽高等样式的属性，比如position，width，height等。
- 决定子组件排列规则的属性，比如flexDirection，flexWrap，justifyContent，alignItems等。
- 决定组件本身显示规则的属性，比如flex，alignSelf等。
- 控制组件填充，空隙等的属性，比如margin，padding等。
FlexBox属性运用示例
-
位置，宽高属性
-
position：它是字符串类型的，取值有：
relative,absolute，用来表述当前的位置是绝对的还是相对的。- absolute：可以用top,bottom,left,right描述距父组件上下左右的位置。
运行效果如下：import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class Main extends Component { render () { return( <View style={styles.container}> <View style={styles.first}/> <Text style={styles.positionAbsolute}> Position </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex:1, backgroundColor: 'white' }, positionAbsolute: { backgroundColor:'red', height: 40, width: 120, position: 'absolute', top: 20, left: 20 } })positionabsolute.jpg- relative：描述的是和同级的上一个组件之间的位置关系，用relative时，不可以使用bottom和right描述，同时left和top默认为0。
运行效果如下：...//略去重复部分 <Text style={styles.positionRelative}> Position </Text> ...//略去重复部分 positionRelative: { backgroundColor:'blue', height: 40, width: 120, color:'white', position:'relative', top:20 }positionRelative.jpg
- 宽高属性：这个比较简单，指定组件宽高大小的。主要有width，minWidth，maxWidth，height，minHeight，maxHeight。
-
-
决定子组件排列规则的属性
- flexDirection：控制子组件的排列方向，取值有：
row,row-reverse,column,column-reverse。默认值为column。- row
import React, { Component } from 'react'; import { StyleSheet, Text, View, Dimensions } from 'react-native'; const windowWidth = Dimensions.get('window').width; export default class Main extends Component { render () { return( <View style={styles.container}> <View style={styles.first}/> <View style={styles.second}/> <View style={styles.third}/> <View style={styles.forth}/> </View> ); } } const styles = StyleSheet.create({ container: { flex:1, backgroundColor: 'white', width:windowWidth, height:200, flexDirection:'row' }, first:{ width:windowWidth/4, height:100, backgroundColor:'red' }, second:{ width:windowWidth/4, height:100, backgroundColor:'blue' }, third:{ width:windowWidth/4, height:100, backgroundColor:'pink' }, forth:{ width:windowWidth/4, height:100, backgroundColor:'purple' } })
direction-row.jpg- row-reverse
...//略去重复代码 flexDirection:'row-reverse' ...//略去重复代码效果如下：
row-reverse.jpg
可以看到是和row成逆序排列。所以带reverse就是翻转排列的意思。- column
效果如下：...//略去重复代码 const windowHeight = Dimensions.get('window').height; ...//略去重复代码 const styles = StyleSheet.create({ container: { flex:1, backgroundColor: 'white', width:200, height:windowHeight, flexDirection:'column' }, first:{ width:100, height:windowHeight/4, backgroundColor:'red' }, second:{ width:100, height:windowHeight/4, backgroundColor:'blue' }, third:{ width:100, height:windowHeight/4, backgroundColor:'pink' }, forth:{ width:100, height:windowHeight/4, backgroundColor:'purple' } })column.jpg- column-reverse：把column进行翻转，即从下往上排列。
- flexDirection：控制子组件的排列方向，取值有：
flexWrap
在默认的情况下，组件中的子组件会按照flexDirection设定的排列下去，即使超出边界也不会管。而flexWrap属性则是控制这种情况的发生，设置flexWrap以后子组件放不下了则会自动换行或者换列。
我们使用上文中row排列方式排列布局，但是每一个子组件的宽度加上20。
width:windowWidth/4 + 20,
效果如下：
no-flexwrap.jpg
显而易见，最后一个紫色超出边界了，但是还是会排列下去，有部分内容不会被显示出来。
当我们在父组件中设置
flexWrap:'wrap'以后：
flexwrap.jpg
-
justifyContent和alignItems
在学习这两个属性之前我们先了解一下主轴和次轴的概念，当flexDirection指定了一个方向时，该方向则为主轴，与之垂直的方向则为次轴。比如设置flexDirection:'row'，这时候水平方向则为主轴，竖直方向则为次轴。-
justifyContent控制子组件在主轴方向的排列方位。其取值为:flex-start,flex-end,center,space-between,space-around
jutifycontent.jpg -
alignItems控制子组件在次轴方向的排列方位。其取值为:flex-start,flex-end,center,stretch。
alignItems.jpg
因为这两个属性是最常用也是相对比较复杂的属性，建议大家多多练习使用这两个属性，尽可能嵌套搭配使用，看看具体的效果。
-
-
组件自身显示规则的属性
- flex
flex取值类型为整数值，默认为0。可以取-1，0，或者任意正整数。当它的值非0时，在父组件弹性方向(flexDirection指定方向)，组件将自动缩放以适应父组件剩下的布局空间。如果父组件的弹性方向为column，那么即使子组件的height有值也会失效，同样弹性方向为row时，子组件的width有值也会失效。
const styles = StyleSheet.create({ container: { flex:1, backgroundColor: 'white', width:windowWidth, height:windowHeight, flexDirection:'row', }, first:{ flex:1, width:100, height:100, backgroundColor:'red' }, second:{ flex:1, width:100, height:100, backgroundColor:'blue' }, third:{ flex:1, width:100, height:100, backgroundColor:'pink' }, forth:{ flex:3, width:100, height:100, backgroundColor:'purple' } })效果如下：
flex.jpg
简单来说，flex和Android中线性布局中的weight权重属性比较类似。在很多时候可以看作就是一个权重的属性。- alignSelf
其用途是为了让子组件忽略父组件的alignItems的设置，取自身alignSelf的值。取值为:auto,flex-start,flex-end,center,stretch。
效果如下：...//省略重复代码 container: { flex:1, backgroundColor: 'white', width:windowWidth, height:windowHeight, flexDirection:'row', alignItems:'flex-start' }, ...//省略重复代码 forth:{ width:100, height:100, backgroundColor:'purple', alignSelf:'center' }alignself.jpg。
- flex
-
空隙，填充
这个属性比较简单，上一张图大家就能看明白：
round.jpg- border：取值为
borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth - padding：取值为
padding对四周都有效,paddingHorizontal对水平方向有效,paddingVertical对垂直方向有效,paddingBottom,paddingRight,paddingLeft,paddingTop - margin：取值为
margin对四周都有效,marginHorizontal对水平方向有效,marginVertical对垂直方向有效,marginBottom,marginRight,marginLeft,marginTop
- border：取值为
总结
FlexBox使用起来简单方便，各项属性约束也很成熟，使用FlexBox可以很快速方便的完成UI界面的搭建。就算是复杂布局也可以很容易实现。React-Native用来写界面实在是太爽了。飞快～并且几乎一致的布局行为和界面展示，再也不用担心安卓碎片化严重的问题啦。
