React-Native 基础（六） 使用Flexbox布局

参考文档：http://facebook.github.io/react-native/docs/flexbox.html
1. 使用flexbox可以指定子布局
2. flexbox兼容不同尺寸的手机屏幕
3. 通常使用flexDirection, alignItems, 和justifyContent的组合实现目标效果

flexDirection
指定子布局是横向（row）还是纵向（column）,默认是纵向

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

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `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);

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 (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `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);

alignItems
alignItems决定子布局沿着副轴（如果主轴是纵轴，那么副轴是横轴，反之亦然）的对齐方式。可选项：flex-start, center, flex-end, 和stretch. 使用stretch时要注意：只有当子布局在副轴上没有固定尺寸时，stretch才有效（这玩意儿相当于match-parent）。

更多的布局参见 http://facebook.github.io/react-native/docs/layout-props.html