React Native - Flex布局講解

rn

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

有四個主要屬性：flex、flexDirection、justifyContent、alignItems。
將對依次講解。

目錄

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

1. flex的使用

我們可以經常看到在代碼中使用 flex:1 ，那么這是什么意思呢？
可以理解為比重

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

以此類推。

下面給出三個例子：

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

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

2.最外層同級只有一個組件，并且設置了flex:1，width設置了一個固定寬度，那么它（粉色）的高度占據全部空間。
（但如果height設置一個固定高度的話，則height失效不起效果，因為組件是豎向排列，此時flex的優先級大于height。）

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

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

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

2. flexDirection 的取值和使用

取值：
column 豎向排列
column-reverse 豎向、反向排列
row 橫向排列
row-reverse 橫向、反向排列
（不設置flexDirection時，默認是column）

當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

當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

當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

當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 均勻鋪滿
（不設置justifyContent時，默認是flex-start）

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

當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

當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

當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

當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

當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的取值和使用

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

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

取值：

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

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

當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

當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

當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

當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. 他們的結合使用。

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

下面給出一個。
flex 設置為 1 讓組件擁有全個屏幕的空間（粉色區域）
flexDirection 設置為 row-reverse 組件橫向、反向排列
justifyContent 設置為 space-around 均勻分布
alignItems 設置為 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

以上，完畢。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容