React Native之Flexbox布局

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。flexbox可以在不同的屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems和justifyContent三个样式属性就已经满足大多数布局需求。

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

1、Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列？默认是竖直轴方向

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

class FlexDirectionBasics extends Component {

  render() {

    return (

      // 尝试把`flexDirection`改为`column`看看

      <View style={{flex: 1,
flexDirection: 'row'}}>

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

      </View>

    );

  }

};

AppRegistry.registerComponent('AwesomeProject',
() => FlexDirectionBasics);

上面的代码中 flexDirection为row时，三个小方块会水平排列，即主轴为水平。

它可能有4个值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2、Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾端分布呢？亦或应该均匀分布？对应的这些可选项有：

flex-start、center、flex-end、space-around以及space-between。

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {

  render() {

    return (

      // 尝试把`justifyContent`改为`center`看看

      // 尝试把`flexDirection`改为`row`看看

      <View style={{

        flex: 1,

        flexDirection: 'column',

        justifyContent: 'space-between',

      }}>

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

      </View>

    );

  }

};

AppRegistry.registerComponent('AwesomeProject',
() => JustifyContentBasics);

在上面的代码中flexDirection决定了整体主轴布局，row—水平，column—竖直，

justifyContent决定了里面子元素的排列方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：
居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3、Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems:
'stretch'才能生效。

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {

  render() {

    return (

      // 尝试把`alignItems`改为`flex-start`看看

      // 尝试把`justifyContent`改为`flex-end`看看

      // 尝试把`flexDirection`改为`row`看看

      <View style={{

        flex: 1,

        flexDirection: 'column',

        justifyContent: 'center',

        alignItems: 'center',

      }}>

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

      </View>

    );

  }

};

AppRegistry.registerComponent('AwesomeProject',
() => AlignItemsBasics);

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline:
项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

具体图解详见：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool