我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
一般来说，使用flexDirection、alignItems和justifyContent三个样式属性就已经能满足大多数布局要求。

这里有一份简易布局图解，可以给你一个大概的印象

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

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素默认沿着竖直轴（column）方向排列。

import React, { Component } from 'react';
import {  View } from 'react-native';
export default 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>
    );
  }
};

运行结果如图

Layout Direction（布局方向）

布局方向指定层次结构中的子元素和文本的布局方向，布局方向也会影响边的开头和结尾。默认情况下，React Native会按照LTR布局方向布局，在这种模式下，起始指的是左边，结尾指的是右边。

• LTR（默认值）文本和子元素，从左到右排列。元素开始时应用的空白和填充将应用于左侧。
• RTL文本和子元素，从右到左排列。元素开始时应用的边距和填充将应用于右侧。

Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素的分布选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

import React, { Component } from 'react';
import {  View } from 'react-native';
export default class JustifyContentBasics extends Component{
    render(){
        return(
        <View style={{
            flex:1,
            flexDirection:'column',
            JustifyContent:'space-between',
        }}>
        <View style={{width:50,height:50,backgroundColor:'powerblue'}} />
        <View style={{width:50,height:50,backgroundColor:'skyblue'}} />
        <View style={{width:50,height:50,backgroundColor:'steelblue'}} />
        </View>
        );
    }
};

运行结果如图

Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素的分布选项有：flex-start、center、flex-end以及stretch。

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

import React, { Component } from 'react';
import {  View } from 'react-native';
export default class AlignItemsBasics extends Component{
    render(){
        return(
        <View style={{
            flex:1,
            flexDirection:'column',
            JustifyContent:'center',
            alignItems:'stretch',
        }}>
        <View style={{width:50,height:50,backgroundColor:'powerblue'}}/>
        <View style={{height:50,backgroundColor:'skyblue'}}/>
        <View style={{height:100,backgroundColor:'steelblue'}}/>
        </View>
        );
    }
};

运行结果如下

深入学习

以上介绍了一些基础知识，但要运用好布局，我们还需要其他很多的样式。对于布局有影响的完整样式列表记录在这个文档中。

在进行真正的开发工作之前，还应记住一个常用的知识点：如何使用TextInput组件来处理用户输入。