IOS React Native FlexBox詳解及資料整理，

# 前言

學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開(kāi)發(fā)基礎(chǔ)，沒(méi)有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML 學(xué)習(xí)

本人接觸 React Native 時(shí)間并不是特別長(zhǎng)，所以對(duì)其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差，在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容，也歡迎萬(wàn)能的朋友們批評(píng)指出，謝謝

文章第一版出自簡(jiǎn)書(shū)，如果出現(xiàn)圖片或頁(yè)面顯示問(wèn)題，煩請(qǐng)轉(zhuǎn)至 簡(jiǎn)書(shū) 查看 也希望喜歡的朋友可以點(diǎn)贊，謝謝

什么是 FlexBox 布局

在 html 中，界面的搭建都是采用 CSS 的布局方式，CSS 是基于盒子模型，依賴(lài)于 display、position、float屬性，這對(duì)于一些比如 垂直居中 的特殊布局來(lái)說(shuō)非常不方便

Flex 是一種全新的針對(duì) Web 和移動(dòng)開(kāi)發(fā)的布局方式，它可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，并且目前的所有瀏覽器已經(jīng)支持這種布局方式，所以不用考慮兼容性方面的問(wèn)題

FlexBox 從字面上可以理解成：能夠很容易變化以適應(yīng)外界條件變化的通用矩形容器，也就是我們常聽(tīng)到的 彈性布局，它的宗旨就是 通過(guò)彈性的方式來(lái)第七和分布容器中內(nèi)容的空間，使其能使用不同屏幕，為盒裝模型提供最大的靈活性（這類(lèi)似于 iOS 開(kāi)發(fā)中的AtuoLayout布局方式）

FlexBox 布局主要思想是：讓容器有能力讓其子項(xiàng)目改變寬度、高度甚至是順序，從而達(dá)到最佳填充可用空間的方式

React Native 中的 FlexBox 是這個(gè)規(guī)范的一個(gè)子集

綜上所述，F(xiàn)lexBox 就是用來(lái)解決 父盒子 和 子盒子 之間的約束關(guān)系，如下圖

FlexBox 在開(kāi)發(fā)中能夠解決下面等問(wèn)題

1. 浮動(dòng)布局
2. 水平和垂直居中
3. 自動(dòng)分配寬度
4. 各種機(jī)型屏幕適配
5. 動(dòng)態(tài)分配子集的尺寸、位置等等

如下圖所示，在 CSS 中，常規(guī)的布局是基于塊和內(nèi)聯(lián)流方向，而 Flex布局是基于 Flexflow流【容器默認(rèn)存在兩根軸：水平的主軸(main axis) 和 垂直的交叉軸(cross axis)，主軸的開(kāi)始位置(與邊框的交叉點(diǎn))叫做 main start,結(jié)束的位置叫 main end;交叉軸的開(kāi)始位置叫做 cross start,結(jié)束位置叫做 cross end。項(xiàng)目默認(rèn)沿著主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size,占據(jù)的交叉軸空間叫做 cross size】

根據(jù)伸縮項(xiàng)目排列方式的不同，主軸和側(cè)軸方向也會(huì)變化，如下圖所示

獲取主屏幕尺寸

為了后面更好的展示案例，我們先來(lái)看看如何獲取主屏幕的尺寸和分辨率

首先，我們需要先導(dǎo)入 Dimensions 庫(kù)
// 導(dǎo)入類(lèi)庫(kù) var Dimensions = require('Dimensions');

接下來(lái)就可以在需要的地方使用 Dimensions 變量獲取屏幕的高度、寬度、分辨率等等數(shù)據(jù)

 export default class TestRN extends Component {
    render() {
      return (
      <View style={styles.container}>
        <Text>當(dāng)前屏幕的寬度:{Dimensions.get('window').width}</Text>
        <Text>當(dāng)前屏幕的高度:{Dimensions.get('window').height}</Text>
      </View>
      );
    }
  }

設(shè)置樣式 // 樣式 const styles = StyleSheet.create({ container: { backgroundColor:'blue' }, });

效果：

既然能拿到屏幕的尺寸，那么就能夠直接將主 View 的大小設(shè)置成屏幕的尺寸，使 View 填充整個(gè)屏幕

// 樣式
  const styles = StyleSheet.create({
    container: {
      backgroundColor:'blue',
      height:Dimensions.get('window').height,
      width:Dimensions.get('window').width
    },
  });

效果：

FlexBox 常用容器屬性

為了方便理解，我們先添加幾個(gè)視圖

// 導(dǎo)入類(lèi)庫(kù)
  var Dimensions = require('Dimensions');

  // 入口
  export default class TestRN extends Component {
    render() {
      return (
      <View style={styles.container}>
        <View style={styles.subViewStyle1}></View>
        <View style={styles.subViewStyle2}></View>
        <View style={styles.subViewStyle3}></View>
      </View>
    );
  }
}

  // 樣式
  const styles = StyleSheet.create({
    container: {
      backgroundColor:'blue',
      height:Dimensions.get('window').height,
      width:Dimensions.get('window').width
    },
    subViewStyle1: {
      backgroundColor:'red',
      height:60,
      width:60,
    },
    subViewStyle2: {
      backgroundColor:'yellow',
      height:60,
      width:60,
    },
    subViewStyle3: {
      backgroundColor:'green',
      height:60,
      width:60,
    },
  });

效果：

flexDirection（該屬性決定了項(xiàng)目排列的方向，也就是主軸的方向）row：主軸為水平方向，起點(diǎn)在左端

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'row'
  },

效果：

row-reverse：主軸為水平方向，起點(diǎn)在右端

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'row-reverse'
  },

效果：

column（默認(rèn)）：主軸為垂直方向，起點(diǎn)在上

container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'column'
  },

效果：

column-reverse：主軸為垂直方向，起點(diǎn)在下

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'column-reverse'
  },

效果：

justifyContent（定義伸縮項(xiàng)目在主軸線的對(duì)齊方式）flex-start（默認(rèn)）：伸縮項(xiàng)目向一行的起始位置靠齊

  container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置子項(xiàng)目在主軸上的對(duì)齊方式
    justifyContent:'flex-start'
  },

效果：

flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置子項(xiàng)目在主軸上的對(duì)齊方式
    justifyContent:'flex-end'
  },

效果：

center：伸縮項(xiàng)目向一行的中間位置靠齊

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置子項(xiàng)目在主軸上的對(duì)齊方式
    justifyContent:'center'
  },

效果：

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等

  container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置子項(xiàng)目在主軸上的對(duì)齊方式
    justifyContent:'space-between'
  },

效果：

space-around：伸縮項(xiàng)目會(huì)平均分布在行內(nèi)，兩端保留一半的空間

  container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置子項(xiàng)目在主軸上的對(duì)齊方式
    justifyContent:'space-around'
  },

效果：

alignItems（定義項(xiàng)目在交叉軸上如何對(duì)齊，可以把它看成側(cè)軸（垂直于主軸）的對(duì)齊方式）flex-start（默認(rèn)）：側(cè)軸軸的起點(diǎn)對(duì)齊

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置項(xiàng)目在側(cè)軸上如何對(duì)齊
    alignItems:'flex-start'
  },

效果：

flex-end：

  container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置項(xiàng)目在側(cè)軸上如何對(duì)齊
    alignItems:'flex-end'
  },

效果：

center：側(cè)軸的中點(diǎn)對(duì)齊

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置項(xiàng)目在側(cè)軸上如何對(duì)齊
    alignItems:'center'
  },

效果：

stretch（默認(rèn)):如果項(xiàng)目沒(méi)有設(shè)置高度或設(shè)置為 auto，將占滿(mǎn)整個(gè)容器高度

 container: {
    backgroundColor:'blue',
    注釋掉高度
    // height:Dimensions.get('window').height,
    // width:Dimensions.get('window').width,
    // 設(shè)置項(xiàng)目在側(cè)軸上如何對(duì)齊
    alignItems:'stretch'
  },

效果：

flexWrap（默認(rèn)情況下，項(xiàng)目都排在一條軸線上，flex-wrap屬性定義如果一條軸線排不下，如何換行）nowrap（默認(rèn)）：不換行

 container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'row',
    // 設(shè)置換行的方式
    flexWrap:'nowrap'
  },

效果：

wrap：換行，第一行在上方

container: {
    backgroundColor:'blue',
    height:Dimensions.get('window').height,
    width:Dimensions.get('window').width,
    // 設(shè)置主軸方向
    flexDirection:'row',
    // 設(shè)置換行的方式
    flexWrap:'wrap'
  },

效果：

FlexBox 常用元素屬性flex（flex-grow、flex-shrink、flex-basis三個(gè)屬性的縮寫(xiě)，第二個(gè)參數(shù)和第三個(gè)參數(shù)是可選參數(shù)）：默認(rèn)值為 "0 1 auto"

寬度 = 彈性寬度 * (flexGrow / sum(flexGorw))（重要）

先來(lái)做一下實(shí)驗(yàn)，看看flex到底是干嘛的，首先，我們先初始化一個(gè)新視圖，便于理解

 // 入口
  export default class TestRN extends Component {
    render() {
      return (
      <View style={styles.container}>
        <View style={{backgroundColor:'red', height:60, width:60}}></View>
        <View style={{backgroundColor:'green', height:60, width:60}}></View>
        <View style={{backgroundColor:'yellow', height:60, width:60}}></View>
      </View>
      );
    }
  }

  // 樣式
  const styles = StyleSheet.create({
    container: {
      backgroundColor:'blue',
      flex:1,
      // 設(shè)置主軸方向?yàn)樗?起點(diǎn)在左
      flexDirection:'row'
    },
  });

效果：

現(xiàn)在我們給紅色項(xiàng)目設(shè)置 flex 為1，可以看到紅色項(xiàng)目的寬度填充了除去 綠色項(xiàng)目和黃色項(xiàng)目 的部分
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>

效果：

接著再給綠色項(xiàng)目也設(shè)置 flex 為1，可以看到紅色項(xiàng)目和綠色項(xiàng)目填充了 除黃色項(xiàng)目 的部分，并且紅色和綠色項(xiàng)目各占剩下空間的一半
<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>

<View style={{backgroundColor:'green', height:60, width:60, flex:1}}></View>

效果：

現(xiàn)在我們?cè)僭O(shè)置黃色項(xiàng)目的 flex 為2，可以看出，紅色和綠色所占的空間和等同于黃色項(xiàng)目，并且紅色和綠色平分了除黃色項(xiàng)目以外的空間，現(xiàn)在我們應(yīng)該能理解上面公式的意思了吧（項(xiàng)目寬度 = 父項(xiàng)目的寬度 * （子項(xiàng)目自身比例 / 所有父項(xiàng)目?jī)?nèi)子項(xiàng)目的比例））


<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>

<View style={{backgroundColor:'green', height:60, width:60, flex:1}}></View>

<View style={{backgroundColor:'yellow', height:60, width:60, flex:3}}></View>

效果：

但是不知道各位發(fā)現(xiàn)了沒(méi)有，雖然我們每個(gè)子項(xiàng)目都同時(shí)設(shè)置了高度和寬度，但是卻只有寬度改變，而高度則一直保持我們?cè)O(shè)置的狀態(tài)，是不是 flex屬性 只對(duì)寬度有效呢？接下來(lái)我們來(lái)修改下代碼，看看是不是真的如我們想象的這樣 ———— 這里我們將綠色的高度去掉，可以看出，綠色項(xiàng)目的高度填充了整個(gè)父項(xiàng)目的高度


<View style={{backgroundColor:'red', height:60, width:60, flex:1}}></View>

<View style={{backgroundColor:'green', width:60, flex:1}}></View>

<View style={{backgroundColor:'yellow', height:60, width:60, flex:3}}></View>

效果：

總結(jié)以上的示例，可以看出，不管是否設(shè)置子項(xiàng)目的寬度，flex都會(huì)忽略寬度，按照上面的公式進(jìn)行縮放，

如果我們?cè)O(shè)置了高度，那么 flex 會(huì)遵循我們所設(shè)置的高度，不去進(jìn)行拉伸，反之將會(huì)對(duì)高度進(jìn)行拉伸

根據(jù) flex 的特性，如果沒(méi)有設(shè)置 View 的尺寸情況下，使用 flex 也可以讓 View 占滿(mǎn)整個(gè)屏幕

container: { backgroundColor:'blue', flex:1 },

alignSelf（允許單個(gè)項(xiàng)目有與其它項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items屬性）auto(默認(rèn))：繼承父元素的alignItems屬性，如果沒(méi)有則切換為stretch
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'auto' },

效果：

flex-start：項(xiàng)目從側(cè)軸的起點(diǎn)開(kāi)始
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'flex-start' },

效果：

flex-end：項(xiàng)目從側(cè)軸的終點(diǎn)開(kāi)始
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'flex-end' },

效果：

center：項(xiàng)目以側(cè)軸的中心為參照
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'center' },

效果：

stretch
subViewStyle2: { backgroundColor:'yellow', height:60, width:60, alignSelf:'stretch' },

效果：

我們 FlexBox 的使用就先簡(jiǎn)單介紹到這里，在后續(xù)的文章中，會(huì)在實(shí)際的開(kāi)發(fā)場(chǎng)景中帶大家更多更細(xì)致地講解 FlexBox,如果你覺(jué)得哪里寫(xiě)得不好或者有誤，麻煩留言或者用郵箱的方式聯(lián)系我，當(dāng)然遇到問(wèn)題也可以，最后如果喜歡我的文章，還請(qǐng)點(diǎn)個(gè)贊并關(guān)注，讀者的肯定是對(duì)我們筆者最大的鼓勵(lì)，謝謝！

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論