深入了解react native布局（一）居中

剛剛做完了一個項目，基本上把react native各種布局方式都用上了，發現了很多坑，也學會和很多，這裡給大家分享一下哈。

首先我們要有個概念：react native裡面是相容大部分我們在css裡面用到的布局方式，此外接觸過css裡面flex布局方式的話，我們會發現react native内的flex布局方式基本上和

css裡的flex布局方式類似，是以不要覺得react native 布局不好做，其實他比起css來說要容易，比原生開發更是容易不知道多少倍。戰略上藐視他!!!

對題：居中

首先大概說下flex需要知道的地方：

flex布局依賴于flexDirection的，意思就是說：以View為例，如果flex布局方式的話，如果它内部子元件的話他們的排列方向有橫向和縱向之分。預設的react native已經設定了flex内部的布局為縱向的。

<View style={{backgroundColor:"red"}}>
        <View style={{backgroundColor:"green"}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange"}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"blue"}}>
          <Text>1</Text>
        </View>
      </View>
           

結果：

那如果是橫向的呢：

<View style={{backgroundColor:"red",flexDirection:"row",height:200}}>
        <View style={{backgroundColor:"green"}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange"}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"blue"}}>
          <Text>1</Text>
        </View>
      </View>
           

結果：

是不是很簡單呢，但是需要指出的是：

我們會發現在當flexDirection是“row”時，内部元件排列順序為橫向排列時，子元件的高度會自動撐滿父元件。同樣的道理如果是“column”時子元件的寬度會自動撐滿父元件。記住這一點。

是以，大概有個印象了吧。

下面我們來說說flex上的值，我們在看别人代碼的時候經常看到flelx:1,flex:2 之類的東東，這些到底是幹嘛的呢？實踐一下吧。我們以flexDirection為“column” 為例

<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>
        <View style={{backgroundColor:"green",flex:1}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange"}}>
          <Text>3</Text>
        </View>
        <View style={{backgroundColor:"blue"}}>
          <Text>3</Text>
        </View>
      </View>
           

結果：

結果很明顯啦，flex:1 會把其餘元件（沒有設定flex）剩餘的空間全部占完。

那我們試試下面這些：

<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>
        <View style={{backgroundColor:"green",flex:1}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange",flex:1}}>
          <Text>3</Text>
        </View>
        <View style={{backgroundColor:"blue",flex:1}}>
          <Text>3</Text>
        </View>
      </View>
           

結果：

是以是不是比起原生來簡單多了，僅僅flex：1 

，就均分了。對我們已經發現了一種自動居中的方式了。

react native 實作居中有多種方式:

<View style={{backgroundColor:"red",flexDirection:"column",height:200}}>
        <View style={{backgroundColor:"green",flex:1}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange"}}>
          <Text>2</Text>
        </View>
        <View style={{backgroundColor:"blue",flex:1}}>
          <Text>3</Text>
        </View>
      </View>
           

結果：

so easy

，居中了。

下面我們說說aliginItems 和justifyContent,這兩個屬性都是設定在父元件上，用于界定子元件的位置。      

aliginItems：官方解釋：      

aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS。
      

大白話：      

如果父元件flexDirection設定為："column",則aliginItems指定的是在橫向上，子元件的定位方式。同理如果父元件felxDirection設定為“row”，則alignItems指定的是在縱向上子元件的定位方式。      

上代碼：      

<View style={{backgroundColor:"red",flexDirection:"column",height:200,alignItems:"center"}}>
        <View style={{backgroundColor:"green",flex:1}}>
          <Text>1</Text>
        </View>
        <View style={{backgroundColor:"orange"}}>
          <Text>2</Text>
        </View>
        <View style={{backgroundColor:"blue",flex:1}}>
          <Text>3</Text>
        </View>
      </View>
           
        
結果：      

  
         
ok，我們貌似已經實作垂直水準居中了。      
   

so，那justifyContent這個屬性是做什麼的呢？

justifyContent：官方解釋：      

justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details.
      

大白話：如果flexDirection為“row”，那麼justifyContent指定的是子元件在橫向上的對齊方式，如果flexDirection為“column”則justifyContent指定的是子元件在縱向上的對齊方式。      

上代碼：      

<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}>
        <View style={{backgroundColor:"orange"}}>
          <Text>2</Text>
        </View>
</View>
           
        
結果：      

ok。

在說說我們的aliginSelf屬性

我們經常會遇到這樣的情況

這在react native裡面怎麼實作呢？呵呵，這就用到我們說的alignSelf屬性了，注意alignSelf是标定在子元件上的，用于指定子元件的對齊方式。如果父元件的flexDirection是“row”，那麼alignSelf就是标定子元件在豎直方向上的對齊方式，同理如果父元件的flexDirection标定為“column”，那麼alignSelf指定的就是子元件在水準方向      

上代碼：

<View style={{backgroundColor:"red",flexDirection:"column",height:200,justifyContent:"center"}}>
        <View style={{backgroundColor:"orange",flexDirection:"row",alignItems:"center"}}>
          <Text style={{fontSize:40}}>你好,</Text>
          <Text style={{fontSize:15,alignSelf:"flex-end"}}>小明我們明天就要去</Text>
          <Text style={{fontSize:40}}>長城</Text>
          <Text style={{fontSize:15,alignSelf:"flex-end"}}>了</Text>
        </View>
      </View>
           

結果：

明白了吧，alignSelf有“flex-start”,"flex-end","center",這幾個屬性。納尼，“center”，

，我們是不是又發現了一種新的居中方式呢。不過alignSelf隻适用于與父元件布局方向相垂直方向上的對齊方式。alignSelf的優先級大于alignItems

是以：居中如何實作呢，有下面幾種方法

1】通過flex實作、2】通過flex實作、3】還是通過flex實作

歡迎拍磚，後續給大家講講react-native内的局對布局，大坑