React Native 基础之 Flexbox 布局

作者: Kevin_小飞象 | 来源:发表于2019-02-25 17:26 被阅读5次

概述

Flexbox 译为弹性布局（这里我们简称 Flex），是CSS的一种布局方案，可以简单、完整、响应式的实现各种页面布局。不只是在 CSS 中应用，在 React Native 也使用了 Flex，基本和 CSS 中的 Flex 类似。甚至在 Android 开发中我们也会用到 Flex，谷歌提供了基于Flex的FlexboxLayout，以便于处理复杂的布局，因此，学习 Flex 布局对于 Android 开发也是有帮助的。
采用 Flex 布局的元素，称为Flex容器（flex container），简称容器，它的所有子元素则是Flex容器的成员称为Flex项目（flex item），简称项目。如下图所示：

flex
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end。相似的，交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列，它在主轴上的长度叫做 main size，交叉轴上的长度叫做 cross size。

Flexbox 容器属性

在 React Native中容器属性有 5 种，它们分别是：

flexDirection
justifyContent
alignItems
alignContent
flexWrap

flexDirection

flexDirection 属性可以决定主轴的方向（即项目的排列方向），它有以下取值：

column(默认值)：主轴为垂直方向，起点在顶端。
row：主轴为水平方向，起点在左端。
column-reverse：主轴为垂直方向，起点在下端。
row-reverse：主轴为水平方向，起点在右端。

实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 60,
    height: 60,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 60,
    height: 60,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 60,
    height: 60,
    backgroundColor:'dodgerblue'
  },
});

效果图：

row.jpg

row-reverse.jpg

justifyContent

justifyContent属性用于定义项目在主轴上的对齐方式。它的取值有以下几种：

flex-start（默认值）：项目与父容器在主轴的起点方向对齐。（比如flexDirection等于row时，项目与父容器左端对齐）
flex-end：项目与父容器在主轴的终点方向对齐（比如flexDirection等于row时，项目与父容器右端对齐）。
center：居中。
space-between：两端对齐，并且项目间隔相等。
space-around：每个项目的两侧间隔相等，因此，项目之间的间隔是项目与父容器边缘间隔的2倍。

实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    justifyContent:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 60,
    height: 60,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 60,
    height: 60,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 60,
    height: 60,
    backgroundColor:'dodgerblue'
  },
});

效果图：

center.jpg

flex-end.jpg

flex-start.jpg

space-around.jpg

space-between.jpg

alignItems

alignItems用于定义项目在交叉轴上的对齐方式。它的取值有以下几种：

flex-start：项目与父容器在交叉轴的起点方向对齐。（比如flexDirection等于row时，项目与父容器上端对齐）
flex-end：项目与父容器在交叉轴的终点方向对齐。（比如flexDirection等于row时，项目与父容器下端对齐）
center：居中。
baseline ：项目的第一行文字的基线对齐。
stretch：（默认值）如果项目未设置高度或者高度设为auto，项目将占满整个容器的高度，否则该取值不会生效。

实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 60,
    height: 60,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 60,
    height: 60,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 60,
    height: 60,
    backgroundColor:'dodgerblue'
  },
});

效果图：

baseline.jpg

center.jpg

flex_end.jpg

flex-start.jpg

stretch.jpg
注意：当项目没有设置高度或者高度设为auto时，stretch才会生效。这里为了验证效果，将所有项目的高度设置为auto。

alignContent

alignContent 用于多行项目在交叉轴上的对齐方式。如果项目只有一行，该属性是不起作用的。它的取值有 flex-start 、flex-end 、 center 、space-between 、 space-around 和 stretch，只比justifyContent的取值多了一个stretch（默认值，含义和alignItems的stretch类似），alignContent 的取值的含义和 justifyContent 的取值的含义类似，这里就不举例了。

flexWrap

flexWrap用于设置如果一行排不下，如何换行。它的取值有以下几种：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，最后一行在上方。

实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
        <View style = {styles.blueBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    flexWrap:'wrap',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 120,
    height: 60,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 120,
    height: 60,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 120,
    height: 60,
    backgroundColor:'dodgerblue'
  },
  blueBox: {
    width: 120,
    height: 60,
    backgroundColor:'blue'
  },
});

效果图：

nowrap.jpg

wrap-reverse.jpg

wrap.jpg

Flexbox项目属性

在React Native中项目属性有很多中，具体的可以参考：Layout Props。这里介绍flexGrow、flexShrink、flexBasis、flex和alignSelf。

flexGrow

flexGrow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 50,
    height: 50,
    flexGrow: 1,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 50,
    height: 50,
    flexGrow: 2,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 50,
    height: 50,
    flexGrow: 1,
    backgroundColor:'dodgerblue'
  },
  
});

效果图:

flexGrow.jpg

flexShrink

flexShrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
实例代码：

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
        <View style = {styles.blueBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 120,
    height: 50,
    flexShrink: 1,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 120,
    height: 50,
    flexShrink: 0,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 120,
    height: 50,
    flexShrink: 1,
    backgroundColor:'dodgerblue'
  },
  blueBox: {
    width: 120,
    height: 50,
    flexShrink: 1,
    backgroundColor:'blue'
  },
});

效果图：

flexShrink.jpg

flexBasis

flexBasis属性定义了项目的初始宽度。它的默认值为auto，即项目的本来的宽度。我们知道width也可以用来设置项目的宽度，如果项目同时设置了width和flexBasis，那么flexBasis会覆盖width的值。

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
        <View style = {styles.blueBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 120,
    height: 50,
    flexBasis: 60,
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 120,
    height: 50,
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 120,
    height: 50,
    backgroundColor:'dodgerblue'
  },
  blueBox: {
    width: 120,
    height: 50,
    backgroundColor:'blue'
  },
});

效果图：

flexBasis.jpg

flex

如果我们每次都要设定flex-grow、flex-shrink和 flex-basis属性，显然有些麻烦，这时我们可以用flex 属性，它是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值为0 1 auto，其中后两个属性可选。关于flex这里就不做举例了。

alignSelf

alignSelf属性和alignItems属性类似，只不过alignSelf作用于项目，它允许单个项目有与其他项目不一样的对齐方式，并且覆盖alignItems属性。alignSelf默认值为为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。alignSelf有五种取值：auto、flex-start、flex-end、center、baseline和stretch，除了多了auto，其他的取值都和alignItems的取值含义一样。

import React, {Component} from 'react';
import { 
  StyleSheet,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style = {styles.powderBox}/>
        <View style = {styles.skyBox}/>
        <View style = {styles.dodgerBox}/>
        <View style = {styles.blueBox}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    alignItems:'flex-start',
    backgroundColor:'ivory'
  },
  powderBox: {
    width: 60,
    height: 60,
    alignSelf: 'flex-end',
    backgroundColor:'powderblue'
  },
  skyBox: {
    width: 60,
    height: 60,
    alignSelf: 'center',
    backgroundColor:'skyblue'
  },
  dodgerBox: {
    width: 60,
    height: 'auto',
    alignSelf: 'stretch',
    backgroundColor:'dodgerblue'
  },
  blueBox: {
    width: 60,
    height: 60,
    alignSelf: 'auto',
    backgroundColor:'blue'
  },
});

效果图：

alignSelf.jpg

React Native 基础之 Flexbox 布局

概述

Flexbox 容器属性

flexDirection

justifyContent

alignItems

alignContent

flexWrap

Flexbox项目属性

flexGrow

flexShrink

flexBasis

flex

alignSelf

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ReactNative