React Native - Flex布局講解

rn

RN的布局采用的是Flex，彈性盒模型。

有四個(gè)主要屬性：flex、flexDirection、justifyContent、alignItems。
將對(duì)依次講解。

目錄

  1. flex的使用。
  2. flexDirection的取值和使用。
  3. justifyContent的取值和使用。
  4. alignItems的取值和使用。
  5. 他們的結(jié)合使用。

1. flex的使用

我們可以經(jīng)?？吹皆诖a中使用 flex:1 ，那么這是什么意思呢？
可以理解為比重

· 如果同級(jí)組件上只有一個(gè)，并且設(shè)置了 flex:1，那么這個(gè)組件相當(dāng)于分配了全部空間。
· 如果同級(jí)組件上只有兩個(gè)，并且這兩個(gè)都設(shè)置了 flex:1，那么相當(dāng)于這兩個(gè)組件平均分配了全部空間。
· 如果同級(jí)組件上只有兩個(gè)，并且第一個(gè)組件設(shè)置了 flex:1，第二個(gè)組件設(shè)置了 flex:2，那么相當(dāng)于第一個(gè)組件占據(jù)全部空間的三分之一，第二個(gè)組件占據(jù)全部空間的三分之二。
· 如果沒有設(shè)置 flex 屬性，那么這個(gè)組件按需分配空間。

以此類推。

下面給出三個(gè)例子：

1.最外層同級(jí)只有一個(gè)組件，并且設(shè)置了flex:1，那么它（粉色）占據(jù)全部空間。

export default class demo extends Component {
  render() {
    return (
      <View style={{flex : 1, backgroundColor:"pink"}}>
      </View>
    );
  }
}
flex-one

2.最外層同級(jí)只有一個(gè)組件，并且設(shè)置了flex:1，width設(shè)置了一個(gè)固定寬度，那么它（粉色）的高度占據(jù)全部空間。
（但如果height設(shè)置一個(gè)固定高度的話，則height失效不起效果，因?yàn)榻M件是豎向排列，此時(shí)flex的優(yōu)先級(jí)大于height。）

export default class demo extends Component {
  render() {
    return (
      <View style={{width:60,flex:1,backgroundColor:"pink"}}>
      </View>
    );
  }
}
flex-second

3.最外層同級(jí)只有兩個(gè)組件，并且width設(shè)置了一個(gè)固定寬度，第一個(gè)組件設(shè)置了flex:2，第二個(gè)組件設(shè)置了flex:1，那么
第一個(gè)組件（粉色）的高度占據(jù)全部空間三分之二。
第二個(gè)組件（藍(lán)色）的高度占據(jù)全部空間三分之一。

export default class demo extends Component {
  render() {
    return (
      <View style={{width:60,flex:1}}>
        //第一個(gè)組件
        <View style={{flex:2,backgroundColor:"pink"}}/>
        //第二個(gè)組件
        <View style={{flex:1,backgroundColor:"blue"}}/>
      </View>
    );
  }
}
flex-third.png

2. flexDirection 的取值和使用

取值：
column 豎向排列
column-reverse 豎向、反向排列
row 橫向排列
row-reverse 橫向、反向排列
（不設(shè)置flexDirection時(shí)，默認(rèn)是column）

當(dāng)flexDirection = column

export default class demo extends Component {
  render() {
    return (
      <View style={{flexDirection:'column'}}>
        <View style={{width:50,height:50,backgroundColor:"red"}}/>
        <View style={{width:50,height:50,backgroundColor:"black"}}/>
        <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
flexDirection = column

當(dāng)flexDirection = column-reverse

export default class demo extends Component {
  render() {
    return (
      <View style={{flexDirection:'column-reverse'}}>
        <View style={{width:50,height:50,backgroundColor:"red"}}/>
        <View style={{width:50,height:50,backgroundColor:"black"}}/>
        <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
flexDirection column-reverse

當(dāng)flexDirection = row

export default class demo extends Component {
  render() {
    return (
      <View style={{flexDirection:'row'}}>
        <View style={{width:50,height:50,backgroundColor:"red"}}/>
        <View style={{width:50,height:50,backgroundColor:"black"}}/>
        <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
flexDirection = row

當(dāng)flexDirection = row-reverse

export default class demo extends Component {
  render() {
    return (
      <View style={{flexDirection:'row-reverse'}}>
        <View style={{width:50,height:50,backgroundColor:"red"}}/>
        <View style={{width:50,height:50,backgroundColor:"black"}}/>
        <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
flexDirection row-reverse

3. justifyContent 的取值和使用

決定其子元素沿著主軸的排列方式

假如是垂直排列（由flexDirection決定），那么：

取值：
flex-start 集中在最上方
center 整體豎向居中
flex-end 集中在最下方
space-around 均勻分布
space-between 均勻鋪滿
（不設(shè)置justifyContent時(shí)，默認(rèn)是flex-start）

注意外層容器要加上flex:1，讓組件有足夠的空間。

當(dāng)justifyContent = flex-start

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'flex-start',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
justifyContent flex-start

當(dāng)justifyContent = center

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
justifyContent center

當(dāng)justifyContent = flex-end

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'flex-end',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
justifyContent flex-end

當(dāng)justifyContent = space-around

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'space-around',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
justifyContent space-around

當(dāng)justifyContent = space-between

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'space-between',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
justifyContent space-between

4. alignItems的取值和使用

決定其子元素沿著次軸的排列方式，次軸與主軸垂直，意味著當(dāng)flexDirection為column時(shí)，主軸是豎向，次軸是橫向，flexDirection為row時(shí)，主軸是橫向，次軸是豎向。

假如是豎向排列（由flexDirection決定），那么：

取值：

  1. flex-start 集中在最左邊
  2. center 整體橫向居中
  3. flex-end 集中在最右邊
  4. stretch 水平撐滿，子組件不能設(shè)置固定的width。
    （不設(shè)置alignItems時(shí)，默認(rèn)是flex-start）

注意外層容器要加上flex:1，讓組件有足夠的空間。

當(dāng)alignItems = flex-start

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,alignItems:'flex-start',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
alignItems flex-start

當(dāng)alignItems = center

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,alignItems:'center',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
alignItems center

當(dāng)alignItems = flex-end

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,alignItems:'flex-end',backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
alignItems flex-end

當(dāng)alignItems = stretch

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,alignItems:'stretch',backgroundColor:"pink"}}>
          <View style={{height:50,backgroundColor:"red"}}/>
          <View style={{height:50,backgroundColor:"black"}}/>
          <View style={{height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
alignItems stretch

5. 他們的結(jié)合使用。

看過上面的講解后，其實(shí)知道單個(gè)是什么效果，兩個(gè)屬性一起用也就不難理解了。

下面給出一個(gè)。
flex 設(shè)置為 1 讓組件擁有全個(gè)屏幕的空間（粉色區(qū)域）
flexDirection 設(shè)置為 row-reverse 組件橫向、反向排列
justifyContent 設(shè)置為 space-around 均勻分布
alignItems 設(shè)置為 center 水平居中

這樣的話，效果就是。

export default class demo extends Component {
  render() {
    return (
      <View style={{flex:1,
                    flexDirection:"row-reverse",
                    justifyContent:'space-around',
                    alignItems:'center',
                    backgroundColor:"pink"}}>
          <View style={{width:50,height:50,backgroundColor:"red"}}/>
          <View style={{width:50,height:50,backgroundColor:"black"}}/>
          <View style={{width:50,height:50,backgroundColor:"green"}}/>
      </View>
    );
  }
}
flex show

以上，完畢。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文主要講解與flex布局相關(guān)的屬性，包括flex，flexDirection，alignItems，justif...
    Gooooood閱讀 9,856評(píng)論 0贊 10
  • 在React-Native中使用flexbox規(guī)則來指定某個(gè)組件的子元素的布局。Flexbox可以在不同屏幕尺寸上...
    Coder_Answer閱讀 1,641評(píng)論 1贊 2
  • 一、FlexBox布局 FlexBox是什么？ 彈性盒模型（The Flexible Box Module）,又叫...
    lever_xu閱讀 1,038評(píng)論 0贊 0
  • 本文出自《React Native學(xué)習(xí)筆記》系列文章。 一款好的APP離不了一個(gè)漂亮的布局，本文章將向大家分享Re...
    CrazyCodeBoy閱讀 37,672評(píng)論 3贊 278
  • 本文只是簡單地介紹下在React-Native中，使用CSS的Flex布局方式，完成RN中的控件布局，掌握這個(gè)布局...
    劉是丑閱讀 1,207評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容