ReactNative之Flex布局（三）

前言

眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.

如果喜歡我的文章，可以關注我微博:袁崢Seemygo

ReactNative之Flex布局

  • 一般使用ReactNative開發App,一般都采用Flex布局，使用這套布局就非常快。

Flex簡介

  • Flex又叫彈性布局，會把當前組件看做一個容器，他的所有子組件都是他容器中的成員，通過Flex，就能迅速的布局容器中的成員。
  • 使用場景：當想快速布局一個組件中所有子組件的時候，可以使用Flex布局

Flex主軸和側軸

  • Flex中有兩個主要的概念：主軸和側軸
  • 主軸與側軸的關系：相互垂直的。
  • 主軸：決定容器中子組件默認的布局方向：水平，垂直
  • 側軸：決定容器中子組件與主軸垂直的布局方向
    • 比如主軸水平，那么子組件默認就是水平布局排布，側軸就是控制子組件在垂直方向的布局

flexDirection屬性

  • flexDirection:決定主軸的方向，水平或者垂直，這樣子組件就會水平排布或者垂直排布
  • flexDirection共有四個值，在RN中默認為column。
row（默認值）：主軸為水平方向，從左向右。依次排列
row-reverse：主軸為水平方向，從右向左依次排列
column：主軸為垂直方向，默認的排列方式，從上向下排列
column-reverse：主軸為垂直方向，從下向上排列
  • 使用
export default class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        height:50,
        fontSize:15,
        textAlign:'center',
        margin:20,
    }
});
  • 效果：
  • row
row.png
  • row-reverse
row-reverse.png
  • column
column.png
  • column-reverse
column-reverse .png

flexWrap屬性

  • flexWrap:決定子控件在父視圖內是否允許多行排列。
  • flexWrap共有兩個值，默認為nowrap。
nowrap 組件只排列在一行上，可能導致溢出。
wrap   組件在一行排列不下時，就進行多行排列
  • 使用

  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        flexWrap:'wrap'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:75,
        height:50,
        fontSize:15,
        textAlign:'center',
        margin:20,
    }
});
  • 效果
  • nowrap
nowrap.png
  • wrap
wrap.png

justifyContent

  • justifyContent:決定子組件在主軸中具體布局，是靠左，還是居中等
  • justifyContent共有五個值，默認為flex-start
flex-start: 子組件向主軸起點對齊，如果主軸水平，從左開始，主軸垂直，從上開始。
flex-end 子組件向主軸終點對齊，如果主軸水平，從右開始，主軸垂直，從下開始。
center 居中顯示，注意：并不是讓某一個子組件居中，而是整體有居中效果
space-between 均勻分配,相鄰元素間距離相同。每行第一個組件與行首對齊，每行最后一個組件與行尾對齊。
space-around 均勻分配,相鄰元素間距離相同。每行第一個組件到行首的距離和每行最后一個組件到行尾的距離將會是相鄰元素之間距離的一半
  • 使用

export default class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    }
});
  • 效果
  • flex-start
flex-start.png
  • flex-end
flex-end.png
  • center
center.png
  • space-between
space-between .png
  • space-around
space-around.png

alignItems

  • alignItems:決定子組件在測軸中具體布局
    • 一直都沒有管過側軸，如果側軸垂直，決定子組件在上，還是下，或者居中
  • alignItems共有四個值，默認為stretch。
flex-start 子組件向側軸起點對齊。
flex-end 子組件向側軸終點對齊。
center 子組件在側軸居中。
stretch 子組件在側軸方向被拉伸到與容器相同的高度或寬度。
  • 使用

  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'stretch'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        // height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    }
});
  • 效果
  • flex-start
flex-start .png
  • flex-end
flex-end .png
  • center
center .png
  • stretch
stretch .png

alignSelf

  • alignSelf:自定義自己的側軸布局，用于一個子組件設置。
    • 注意：當某個子組件不想參照默認的alignItems時，可以設置alignSelf，自定義自己的側軸布局。
  • alignSelf共有五個值，默認為auto。
auto 繼承它的父容器的alignItems屬性。如果沒有父容器則為 "stretch"
flex-start 子組件向側軸起點對齊。
flex-end 子組件向側軸終點對齊。
center 子組件在側軸居中。
stretch 子組件在側軸方向被拉伸到與容器相同的高度或寬度。
  • 使用
export default class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text4Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    },
    baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        // height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    },
    text3Style:{
        alignSelf:'flex-start'
    }
});
  • 效果
alignSelf.png

flex

  • flex: 決定子控件在主軸中占據幾等分。

  • flex: 任意數字，所有子控件flex相加，自己flex占總共多少，就有多少寬度.

  • 使用

export default class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.rootView}>
          <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
          <Text style={[styles.text2Style,styles.baseTextStyle]}>2</Text>
          <Text style={[styles.text3Style,styles.baseTextStyle]}>3</Text>
          <Text style={[styles.text4Style,styles.baseTextStyle]}>4</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    },
    baseTextStyle:{
        // width:50,
        // height:50,
        fontSize:15,
        textAlign:'center',
        marginTop:20,
    },
    text1Style:{
        flex:1,
        backgroundColor:'red',
    },
    text2Style:{
        flex:1,
        backgroundColor:'deepskyblue',
    },
    text3Style:{
        flex:3,
        backgroundColor:'green'
    },
    text4Style:{
        flex:1,
        backgroundColor:'blue',
    }
});
  • 效果
flex.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一般使用ReactNative開發App,一般都采用Flex布局，使用這套布局就非常快。Flex簡介Flex又叫彈...
    因幡白兔閱讀 898評論 6贊 8
  • ReactNaive之CSS和Flex布局 ReactNaive相關文章1. React Native 中文網2....
    TitanCoder閱讀 1,201評論 0贊 1
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,625評論 0贊 26
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,801評論 1贊 92
  • 五月三號。 老干托著下巴一言不發，轉頭看了一眼窗外，又環顧了一周，發現房間里只有自己一人。房間里的小風扇在拼命地搖...
    我怎么不能閱讀 247評論 0贊 0