React Native使用FlexBox布局

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

FLex Dirction

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

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

export default class FlexDirctionBasics extends Component {
  render(){
    return(
        <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>
    );
  }
}

result

flexDirection:'row'

flexDirection:'column'

Justify Content

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

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

export default class FlexDirctionBasics extends Component {
  render(){
    return(
        <View style={{flex:1,
        flexDirection:'column',
        justifyContent:'space-around'
        }}>
          <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>
    );
  }
}

result

justifyContent:'space-around'

这里有一份简易布局图解,可以又一个大概的印象。

Align Items

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

export default class FlexDirctionBasics extends Component {
  render(){
    return(
        <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>
    );
  }
}

result

flexDirection:'column', justifyContent:'center',alignItems:'center'

对于布局有影响的完整样式列表记录(http://reactnative.cn/docs/0.50/layout-props.html)