原文

A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

父组件可以通过Flexbox算法指定子元素的布局。Flexbox算法的目的是为不同尺寸的屏幕提供统一的布局。

You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

完成布局，通常要将flexDirection，alignItems和justifyContent属性组合使用。

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

在React Native中Flexbox的和CSS在浏览器中的工作机制基本一致，也有一些细节存在差异，比如flexDirection在React Native中的默认值是column，而在CSS中的默认值是row，并且flex只能接受单个数字值。

伸缩方向（Flex Direction）

Adding flexDirection to a component’s style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

在组件的style中添加flexDirection属性，以控制布局的主轴，来决定子元素是应该在水平方向（row）还是垂直方向（column）组织？默认值是column。

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

export default 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>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

内容对齐（Justify Content）

Adding justifyContent to a component’s style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, and space-between.

在组件的style中添加justifyContent属性，以控制子元素在主轴方向上分布，来决定子元素是应该在头部，中部，尾部还是平均分布？可用的选项是flex-start，center，flex-end，space-around和space-between。

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

export default 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>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

元素对齐（Align Items）

Adding alignItems to a component’s style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.

在组件的style中添加alignItems属性，以控制子组件在副轴（如果主轴是row，则副轴是column，反之亦然）上的对齐方式，来决定子组件是应该头部、中部、尾部对其或拉伸填充？可用的选项是flex-start、center、flex-end和stretch。

For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.

当使用strecth的时候有一个副作用，子组件不能在副轴方向上设置固定尺寸，比如下面的例子，只有将width: 50去掉之后alignItems: stretch的设置才会生效。

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

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `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>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

更进一步（Going Deeper）

We’ve covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

上面简单的介绍了相关的基础概念，如果遇到更复杂的布局样式，可以参考这里查看详细的布局控制文档。

We’re getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let’s move on to learn how to handle text input with the TextInput component.

目前为止，所学习的知识已经接近创建一个完整的真实应用程序，但还没有学习的一个细节是处理用户的输入，让我们继续学习如何处理TextInput组件中的文本输入。