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,backgroundColor: 'skyblue'}} /> <View style={{width: 50,backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject',() => FlexDirectionBasics);

justifyContent
决定子布局沿着主轴的分布，可选项有flex-start,center,flex-end,space-around和space-between.

import React,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,() => JustifyContentBasics);

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

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