[React-Native]React-Native for Android(三)：FlexBox布局

概述

在我们使用React-Native的时候，最主要的方面是对界面UI组件的编写。React-Native采用了FlexBox的布局方式，FlexBox全称Flexible Box，是CSS3中的一种布局方式，可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为。可以看出，FlexBox可以在不同尺寸的屏幕上保持几乎一致的布局行为，这一点对于在碎片化严重的Android机型上尤为重要。

FlexBox属性分类

FlexBox所使用的属性可以大致分为四类：

• 位置，宽高等样式的属性，比如position，width，height等。
• 决定子组件排列规则的属性，比如flexDirection，flexWrap，justifyContent，alignItems等。
• 决定组件本身显示规则的属性，比如flex，alignSelf等。
• 控制组件填充，空隙等的属性，比如margin，padding等。

FlexBox属性运用示例

• 位置，宽高属性

  • position：它是字符串类型的，取值有：relative,absolute，用来表述当前的位置是绝对的还是相对的。

    • absolute：可以用top,bottom,left,right描述距父组件上下左右的位置。

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View
     } from 'react-native';
    export default class Main extends Component {
      render () {
          return(
              
                  
                  
                      Position
                  
              
          );
      }
    }
    const styles = StyleSheet.create({
      container: {
          flex:1,
          backgroundColor: 'white'
      },
      positionAbsolute: {
          backgroundColor:'red',
          height: 40,
          width: 120,
          position: 'absolute',
          top: 20,
          left: 20
      }
    })
    

    运行效果如下：
    

    positionabsolute.jpg
    • relative：描述的是和同级的上一个组件之间的位置关系，用relative时，不可以使用bottom和right描述，同时left和top默认为0。

      ...//略去重复部分
      
            Position
      
      ...//略去重复部分
      positionRelative: {
        backgroundColor:'blue',
        height: 40,
        width: 120,
        color:'white',
        position:'relative',
        top:20
      }
    

    运行效果如下：
    

    positionRelative.jpg
  • 宽高属性：这个比较简单，指定组件宽高大小的。主要有width，minWidth，maxWidth，height，minHeight，maxHeight。

• 决定子组件排列规则的属性

  • flexDirection：控制子组件的排列方向，取值有：row,row-reverse,column,column-reverse。默认值为column。
    • row

      import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Dimensions
    } from 'react-native';
    const windowWidth = Dimensions.get('window').width;
    export default class Main extends Component {
        render () {
            return(
                
                    
                    
                    
                    
                
            );
        }
    } 
    
    const styles = StyleSheet.create({
        container: {
            flex:1,
            backgroundColor: 'white',
            width:windowWidth,
            height:200,
            flexDirection:'row'
        },
        first:{
            width:windowWidth/4,
            height:100,
            backgroundColor:'red'
        },
        second:{
            width:windowWidth/4,
            height:100,
            backgroundColor:'blue'
        },
        third:{
            width:windowWidth/4,
            height:100,
            backgroundColor:'pink'
        },
        forth:{
            width:windowWidth/4,
            height:100,
            backgroundColor:'purple'
        }
    })
    

  效果如下：
  

  direction-row.jpg
  • row-reverse

  ...//略去重复代码
  flexDirection:'row-reverse'
  ...//略去重复代码
  

  效果如下：

  

  row-reverse.jpg
  
  可以看到是和row成逆序排列。所以带reverse就是翻转排列的意思。
  • column

  ...//略去重复代码
    const windowHeight = Dimensions.get('window').height;
  ...//略去重复代码
    const styles = StyleSheet.create({
    container: {
      flex:1,
      backgroundColor: 'white',
      width:200,
      height:windowHeight,
      flexDirection:'column'
    },
    first:{
      width:100,
      height:windowHeight/4,
      backgroundColor:'red'
    },
    second:{
      width:100,
      height:windowHeight/4,
      backgroundColor:'blue'
    },
    third:{
      width:100,
      height:windowHeight/4,
      backgroundColor:'pink'
    },
    forth:{
      width:100,
      height:windowHeight/4,
      backgroundColor:'purple'
    }
  })
  

  效果如下：
  

  column.jpg
  • column-reverse：把column进行翻转，即从下往上排列。

• flexWrap
  在默认的情况下，组件中的子组件会按照flexDirection设定的排列下去，即使超出边界也不会管。而flexWrap属性则是控制这种情况的发生，设置flexWrap以后子组件放不下了则会自动换行或者换列。
  我们使用上文中row排列方式排列布局，但是每一个子组件的宽度加上20。

width:windowWidth/4 + 20,

效果如下：

no-flexwrap.jpg

显而易见，最后一个紫色超出边界了，但是还是会排列下去，有部分内容不会被显示出来。
当我们在父组件中设置 flexWrap:'wrap'以后：

flexwrap.jpg

• justifyContent和alignItems
  在学习这两个属性之前我们先了解一下主轴和次轴的概念，当flexDirection指定了一个方向时，该方向则为主轴，与之垂直的方向则为次轴。比如设置flexDirection:'row'，这时候水平方向则为主轴，竖直方向则为次轴。

  • justifyContent控制子组件在主轴方向的排列方位。其取值为:flex-start,flex-end,center,space-between,space-around
    

    

    jutifycontent.jpg

  • alignItems控制子组件在次轴方向的排列方位。其取值为:flex-start,flex-end,center,stretch。
    

    

    alignItems.jpg

  因为这两个属性是最常用也是相对比较复杂的属性，建议大家多多练习使用这两个属性，尽可能嵌套搭配使用，看看具体的效果。

• 组件自身显示规则的属性

  • flex
    flex取值类型为整数值，默认为0。可以取-1，0，或者任意正整数。当它的值非0时，在父组件弹性方向(flexDirection指定方向)，组件将自动缩放以适应父组件剩下的布局空间。如果父组件的弹性方向为column，那么即使子组件的height有值也会失效，同样弹性方向为row时，子组件的width有值也会失效。

  const styles = StyleSheet.create({
  container: {
        flex:1,
        backgroundColor: 'white',
        width:windowWidth,
        height:windowHeight,
        flexDirection:'row',
    },
    first:{
        flex:1,
        width:100,
        height:100,
        backgroundColor:'red'
    },
    second:{
        flex:1,
        width:100,
        height:100,
        backgroundColor:'blue'
    },
    third:{
        flex:1,
        width:100,
        height:100,
        backgroundColor:'pink'
    },
    forth:{
        flex:3,
        width:100,
        height:100,
        backgroundColor:'purple'
    }
  })
  

  效果如下：

  

  flex.jpg
  
  简单来说，flex和Android中线性布局中的weight权重属性比较类似。在很多时候可以看作就是一个权重的属性。
  • alignSelf
    其用途是为了让子组件忽略父组件的alignItems的设置，取自身alignSelf的值。取值为:auto,flex-start,flex-end,center,stretch。

  ...//省略重复代码
  container: {
      flex:1,
      backgroundColor: 'white',
      width:windowWidth,
      height:windowHeight,
      flexDirection:'row',
      alignItems:'flex-start'
  },
  ...//省略重复代码
  forth:{
      width:100,
      height:100,
      backgroundColor:'purple',
      alignSelf:'center'
  }
  

  效果如下：
  

  alignself.jpg

  。

• 空隙，填充
  这个属性比较简单，上一张图大家就能看明白：

  
  
  

  round.jpg
  • border：取值为borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth
  • padding：取值为
    padding对四周都有效,paddingHorizontal对水平方向有效,paddingVertical对垂直方向有效,paddingBottom,paddingRight,paddingLeft,paddingTop
  • margin：取值为
    margin对四周都有效,marginHorizontal对水平方向有效,marginVertical对垂直方向有效,marginBottom,marginRight,marginLeft,marginTop

总结

FlexBox使用起来简单方便，各项属性约束也很成熟，使用FlexBox可以很快速方便的完成UI界面的搭建。就算是复杂布局也可以很容易实现。React-Native用来写界面实在是太爽了。飞快～并且几乎一致的布局行为和界面展示，再也不用担心安卓碎片化严重的问题啦。