React-Native中的Flexbox布局简述

2016-10-26 本文已影响228人刘是丑

本文只是简单地介绍下在React-Native中，使用CSS的Flex布局方式，完成RN中的控件布局，掌握这个布局方式对于后续开发有非常大的用途。

什么是Flexbox

Flexbox（Flexible Box）旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。

与CSS的主要差异

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。

基本要素

因为Flexbox是整个模块，不是一个属性，它涉及很多东西，包括其整个组属性。他们当中一部分是容器（父元素，称为“伸缩容器”），另一部分是子元素（称为“伸缩项目”）。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。请看看来自w3c规范中的这张图，解释了flex布局的主要思想。

flexbox-guide-1.jpg

flexbox-guide-2.jpg

属性

父容器的属性

flexDirection: row | row-reverse | column（默认） | column-reverse 表明容器里面的子元素的排列方向。
flexWrap: nowrap（默认） | wrap | wrap-reverse 如果子元素溢出父容器的时候是否进行换行。
justifyContent: flex-start | flex-end | center | space-between | space-around; 这一个容器子元素横向排版在容器的哪个位置
alignItems: flex-start | flex-end | center | baseline | stretch; 这个容器子元素纵向排版在容器的哪个位置

子容器的属性

alignSelf: auto | flex-start | flex-end | center | stretch；特定某个子元素的排布情况；
position: relative（默认）| absolute；相比较Android由父视图决定布局的规则来说，React-Native是由子视图决定布局方式的

官方这么解释

例子

flexDirection:

export default class LearnFlexBox extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.sub} backgroundColor='#333333'/>
        <View style={styles.sub} backgroundColor='#FF0000'/>
        <View style={styles.sub} backgroundColor='#00FF00'/>
        <View style={styles.sub} backgroundColor='#0000FF'/>
      </View>
    );
  }
const styles = StyleSheet.create({
    container: {
      flexDirection: 'column', // row
      height: 400,
  },
    sub: {
      flex: 1,
      height: 50,
    }
});

flexDirection-row.png

flexDirection-column.png

alignItems:

const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      height: 400,
      alignItems: 'stretch', // flex-start, flex-end, center, stretch, 当设置为stretch时，子容器的height属性不能设置
 },
    sub: {
      flex: 1,
     //  height: 50,
    }
});

alignItems-flex-start.png

alignItems-flex-end.png

alignItems-flex-center.png

alignItems-flex-stretch.png

justifyContent，有垂直就有水平:

const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      height: 400,
      justifyContent: 'flex-start', // flex-start, flex-end, center, space-between, space-around
 },
    sub: {
      height: 300,
      width: 50,
    }
});

justifyContent-center.png

justifyContent-flex-end.png

justifyContent-flex-start.png

justifyContent-space-between.png

justifyContent-space-around.png

alignSelf:

export default class LearnFlexBox extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.sub1} backgroundColor='#333333'/>
        <View style={styles.sub2} backgroundColor='#FF0000'/>
        <View style={styles.sub3} backgroundColor='#00FF00'/>
        <View style={styles.sub4} backgroundColor='#0000FF'/>
        <View style={styles.sub5} backgroundColor='#ABCDEF'/>
      </View>
    );
}
const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      height: 600,
  },
    sub1: {
      flex: 1,
      alignSelf: 'stretch', // auto, flex-start, flex-end, center, stretch
  },
    sub2: {
      flex: 1,
      height: 300,
      alignSelf: 'flex-start',
   },
    sub3: {
      flex: 1,
      height: 300,
      alignSelf: 'flex-end',
    },
    sub4: {
      flex: 1,
      height: 300,
      alignSelf: 'center',
    },
    sub5: {
      flex: 1,
      height: 300,
      alignSelf: 'auto',
    }
});

alignSelf.png

flex,主要控制子容器在父容器中的占比,如图:

sub1: {
    flex: 1,
    alignSelf: 'stretch', // auto, flex-start, flex-end, center, stretch
  },
  sub2: {
    flex: 2,
    height: 300,
    alignSelf: 'flex-start',
  },
  sub3: {
    flex: 3,
    height: 300,
    alignSelf: 'flex-end',
  },
  sub4: {
    flex: 4,
    height: 300,
    alignSelf: 'center',
  },
  sub5: {
    flex: 5,
    height: 300,
    alignSelf: 'auto',
  }

flex.png

position,主要控制子视图的布局方式,如图:
relative布局：

  sub6: {
       position: 'relative',
       height: 100,
       width: 100
  }

relative-效果1.png

relative-图层1.png

```
sub6: {
   position: 'relative',
   left: 10,
   height: 100,
   width: 100
},
```

relative-效果2.png

relative-图层2.png

注：以上两种`relative`的不同之处在于后者比前者多了一句`left: 10`这个布局，导致了`sub6`的涂层位置直接跟`sub1`黑色的图层处于同一层级了，并不像前者那样是在整个图层的最外层,因此我们得出的结论是:

当postion键的值为`relative`时，不可以使用`bottom`和`right`键继续描述位置，`top`和`left`键表示当前组件距离上一个同级组件最上（左）沿有多少pt

absolute布局：

sub7: {
        position: 'absolute',
        left: -90,
        height: 100,
        width: 100
    }

absolute-效果1.png

absolute-图层1.png

```
sub7: {
    position: 'absolute',
    left: 10,
    height: 100,
    width: 100
}
```

absolute-效果2.png

absolute-图层2.png

```
sub7: {
    position: 'absolute',
    left: 80,
    height: 100,
    width: 100
}
```

absolute-效果3.png

absolute-图层3.png

```
sub7: {
    position: 'absolute',
    left: 200,
    height: 100,
    width: 100
}
```

absolute-效果4.png

absolute-图层4.png

注：以上四种`absolute`的不同之处在于`left: xxx`这个布局的值不一样，导致了`sub7`的涂层位置在不断变化，仔细观察我们得出的结论是:

使用`absolute`布局子视图时，子视图所处的图层 = 该子视图是否有“接触”的父视图的层级 + 1

参考资料

一个完整的Flexbox指南
 3分钟轻松玩转React Native中position、flexbox布局
 A Complete Guide to Flexbox
React Native 之 flexbox 布局详解篇
 React-Native中文网