React Native 彈性布局FlexBox

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

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