5分鐘吃透React Native Flexbox

今天咱們來聊聊Flexbox，它是前端的一個佈局方式。在React Native中是主流佈局方式。若是你剛剛入門React Native，或者沒有多少前端的技術經驗，亦或者對其半知半解，那麼這篇文章將很好的幫助你參透Flexbox的整個全貌。

purpose

經過這篇文章你將快速吃透整個Flexbox，由於對於Flexbox你只需掌握如下幾點屬性便可。

• flex
• flexDirection
• justifyContent
• alignItems
• flexWrap
• alignSelf

flex

Flexbox使用的是彈性佈局，它有個屬性flex用來控制它的彈性。有點相似與Android佈局中的weight屬性。固然與前端的css中的flex也有所不一樣，它支持的類型是number不是string。它有三種狀態：正數、零與負數。直接看代碼：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
 
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.red}/>
          <View style={styles.blue}/>
          <View style={styles.orange}/>
      </View>
    );
  }
}
   
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  red: {
      flex: 1,
      width: 100,
      backgroundColor: 'red'
  },
  blue: {
      flex: 2,
      width: 100,
      backgroundColor: 'blue'
  },
  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange'
  }
});

父容器使用flex:1來撐滿整個屏幕，orange是固定的一個view，而red與blue使用flex，經過flex的值進行等比(1:2)分攤剩餘的空間。來看下運行效果。

這是爲正數的狀況，若是flex:0，控件的大小就會根據設置的width與height來固定顯示。

若是flex:-1，若是空間足夠，控件的大小也會根據width與height來展現；若是空間不足，會根據minWidth與minHeight來展現。

通常都不會使用flex:-1，並且通過測試，空間不足時minWidth與minHeight並不會生效。若是發現生效的方式請務必告知。

flexDirection

在Flexbox中有主軸與副軸之分，主軸控制child的排列方向，默認爲column。能夠經過flexDirection屬性改變主軸方向。它有四個可選值分別爲

• row: child水平方向排列
• column: child豎直方向排列(默認)
• row-reverse: child水平方向反向排列
• column-reverse: child豎直方向反向排列

在上面的demo基礎上改變style樣式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  red: {
      height: 100,
      width: 100,
      backgroundColor: 'red'
  },
  blue: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
  },
  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange'
  }
});

分別改變container中flexDirection的值：row、row-reverse、column、column-reverse

justifyContent

固定好主軸以後，能夠經過justifyContent來指定主軸方向child的排列方式，它有六個可選值

• flex-start: child對齊主軸的起點(默認)
• flex-end: child對齊主軸的終點
• center: child居中對齊主軸
• space-between: child在主軸方向相鄰child等間距對齊，首尾child與父容器對齊
• space-around: child在主軸方向相鄰child等間距對齊，首尾child與父容器的間距相等且爲相鄰child間距的一半
• space-evenly: child在主軸方向均勻分佈。相鄰間距與首尾間距相等

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  }

依次改變container中的justifyContent：flex-start、flex-end、center、space-between、space-around與space-evenly

alignItems

主軸固定以後，剩下的就是副軸，alignItems能夠用來控制副軸上的child排列方式。它有五個可選項分別爲

• flex-start: child對齊副軸起點(默認)
• flex-end: child對齊副軸終點
• center: child居中對齊副軸
• stretch: child爲彈性佈局時(未設置副軸方向的大小或者爲auto)，拉伸對齊副軸
• baseline: 有文本存在時，child在副軸方向基於第一個文本基線對齊

改變container的style，主軸設置爲row，依次改變alignItems：flex-start、flex-end、center

container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
  }

最後將alignItems設置爲stretch，而且改變red的height，red會被拉伸

container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  red: {
      width: 100,
      height: 'auto',
      backgroundColor: 'red'
  }

alignItems: baseline，並非文本的正中心，而是文本View的容器底部。在上面基礎上添加一個Text，讓文本自身居中展現。

container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'baseline',
    backgroundColor: '#F5FCFF',
  },
  text: {
      width: 80,
      height: 80,
      fontSize: 20,
      color: 'white',
      marginTop: 110,
      backgroundColor: 'black',
      textAlign: 'center',
      textAlignVertical: 'center'
  }

flexWrap

若是再增長一個View，因爲空間不足它會展現不全。這時可使用flexWrap屬性，它能夠支持自動換行展現。

• nowrap: 不換行(默認)
• wrap: 自動換行

在container中添加flexWrap屬性，而且再添加一個green view

container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  },
  green: {
      width: 100,
      height: 100,
      backgroundColor: 'green'
  }

alignSelf

alignSelf屬性相似於alignItems，它也是控制副軸上的排列規則，不一樣的是它使用的對象是child本身。它能夠改變父容器alignItems的屬性控制的child排列規則，在副軸上實現本身的排列規則。默認值爲auto，繼承父容器的alignItems屬性。所以它也有五個可選值：flex-start、flex-end、center、stretch與baseline。例如咱們爲range添加alignSelf，其它的child不變，都繼承父容器的alignItems: flex-start

orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange',
      alignSelf: 'flex-end'
  }

其它的可選值就不一一說明，能夠參考alignItems

other

最後還有三個比較冷門屬性，這裏就不詳細一一代碼與貼圖，簡單的說下它們的做用，相同點是它們都是在child中使用，與alignSelf的做用域同樣。

• flexBasis: 設置主軸方向上的初始值，默認爲auto。若是與width或者height同時存在，則會覆蓋它們的值
• flexGrow: 設置chid的放大比例，相似於flex，空間充足時自動按比例放大，默認爲0
• flexShrink: 設置chid的縮小比例。空間不足時自動按比例縮小，默認爲0

有關Flexbox，縱觀全文只需掌握開頭所列的六種屬性，React Native中的絕大多數佈局也就不成問題。如今對於Flexbox是否清晰了許多呢？趕忙親自去試試吧~

精選文章

ViewDragHelper之手勢操做神器

Android Architecture Components Part1:Room

自定義Android註解Part1:註解變量

tensorflow-梯度降低,有這一篇就足夠了

---

感受不錯的能夠來一波關注，掃描下方二維碼，關注公衆號，及時獲取最新知識技巧。