React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。

何为FlexBox?

   完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。

  在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。

FlexBox属性：

flexDirection:该属性确定了主轴方向，枚举值。

　　　　row         主轴方向为水平，起点在左端。

　　　　row- reverse      主轴方向为水平，起点在右端

　　　　column　　　　主轴方向为垂直，起点在上端

　　　　column-reverse        主轴方向为垂直，起点在下端

justlfyContent:该属性确定了组件在主轴方向上的对齐方式，枚举值。

　　　　flex-start(默认) 　　组件沿着主轴方向的起始位置靠齐。如：假如主轴方向是row的话就是左对齐，是row- reverse的话就是右对齐，是column的话就是上对齐，是　column-reverse的话就是下对齐。

　　　　fle-end            组件沿着主轴方向的结束位置靠齐，和flex-start相反。

　　　　space-between　　组件在主轴方向上两端对齐，其中的间隔相等。

　　　　space-around　　　组件会平均分配在主轴方向上，两端保留一定的位置空间。

alignsItems:组件在侧轴方向上的对齐方式。

　　　　flex-start         组件沿着侧轴上的起点对齐

　　　　flex-end          组件沿着侧轴上的终点对齐

　　　　center　　　  　组价在侧轴方向上居中对齐

　　　　stretch(默认)　 组件在侧轴方向上占满

flexWrap: 是否换行

默认情况下，项目都排列在一条线上，放不下的部分则不放置，flexWap就是定义是否换行的。

　　　　nowrap(默认)　　　不换行

　　　　wrap            换行，第一行在上方

　　　　wrap-reverse  　　换行，第一行在下方

flex:有三个参数，默认参数为 0 1 auto。  第一个参数为flex-grow,第二，第三个为:flex-shrink和flex-basis。

alignSelf:定义单个组件自己的对齐方式，默认为auto。枚举值：auto|flex-start|flex-end|center|baseline|stretch

position：枚举值，absolute绝对定位，relative相对定位

margin:内边距

padding：外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
  * Sample React Native App
  * https://github.com/facebook/react-native
  * 周少停 2016-09-12
  * 弹性布局 flex-box
  */
 
import  React, { Component } from  'react' ;
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View
} from  'react-native'
/**-----------------------------------第一个示例程序----------------------------------------------------- **/
class  Project  extends  Component {
   render() {  //初始化
     return  (
       <View style={styles.container}>
         <Text style={{backgroundColor: 'red' ,height:50}}>第一个</Text>
         <Text style={{backgroundColor: 'blue' ,height:100}}>第二个</Text>
         <Text style={{backgroundColor: 'green' ,height:160}}>第三个</Text>
         <Text style={{backgroundColor: 'yellow' ,height:200}}>第四个</Text>
       </View>
     );
   }
}
//样式
const styles = StyleSheet.create({
   container: {
//     flex:1,  //充满全屏,否则内容多少,只显示多少区域.   是'flex-grow''flex-shrink''flex-basis'三个属性的缩写,其中第二个和第三个参数都是可选,默认值是"0 1 auto" 宽度 = 弹性宽度 * (flexGrow/sum(flexGrow))
//     width:200,
     height:200,
     marginTop:20, //上边距
     backgroundColor: 'black' , //背景色
     flexDirection: 'row' ,  //React Native 布局采用FlexBox(弹性布局),该属性是设置布局的主轴方向为row:横向(默认方向是竖向:column)
     justifyContent: 'space-between' ,  //定义了伸缩项目在主轴线的对齐方式 flex-start | flex-end | center | space-between | space-around
     alignItems: 'flex-start'     //定义了伸缩项目在侧轴(交叉轴)的对齐方式 flex-start | flex-end | center | baseline | stretch(默认)
   }
});
 
/**-----------------------------------第二个示例程序----------------------------------------------------- **/
class  Project1  extends  Component {
   render() {  //初始化
     return  (
       <View style={styles1.container}>
         <Text style={{backgroundColor: 'red' ,width:200}}>第一个</Text>
         <Text style={{backgroundColor: 'blue' ,width:300}}>第二个</Text>
         <Text style={{backgroundColor: 'green' ,width:200}}>第三个</Text>
         <Text style={{backgroundColor: 'yellow' ,width:200}}>第四个</Text>
       </View>
     );
   }
}
const styles1 = StyleSheet.create({
    container:{
       backgroundColor: 'black' ,
       marginTop:20,
       flexDirection: 'row' ,
       justifyContent: 'flex-start' ,
       flexWrap: 'wrap'  //定义显示不下的显示模式,默认情况下,控件都是在一条线上   wrap换行 nowarp(默认值)不换行 warp-reverse:换行,效果和wrap相反
    }
});
/**-----------------------------------第三个示例程序----------------------------------------------------- **/
  //alignSelf允许单个项目可以有自己单独的对齐方式
class  Project2  extends  Component{
   render(){
     return (
       <View style={styles2.container}>
         <Text style={{backgroundColor: 'red' ,flex:1,height:50,alignSelf: 'center' }}>第一个</Text> 
         <Text style={{backgroundColor: 'blue' ,flex:2,height:30,alignSelf: 'flex-start' }}>第二个</Text>
         <Text style={{backgroundColor: 'green' ,flex:2,height:70,alignSelf: 'flex-end' }}>第三个</Text>
         <Text style={{backgroundColor: 'yellow' ,flex:1,height:80,alignSelf: 'stretch' }}>第四个</Text>
       </View>
     );
   }
}
const styles2 = StyleSheet.create({
    container:{
      backgroundColor: 'black' ,
      marginTop:20,
      flexDirection: 'row'
    }
});
 
AppRegistry.registerComponent( 'Project' , () => Project2);   //注册

　　完整源码下载：https://github.com/pheromone/React-Native-1