在手机上打开一个App，其呈现出来的所有元素都有大小（宽高），也有一个位置。由于移动设备的尺寸大小不一，我们不能根据像素点来描述大小和位置。在React Native中描述大小和位置的单位都是"点"，"点"表示的是与设备像素密度无关的逻辑像素点。

简单设置组件的宽高

假如一个组件的大小是固定不变的，我们可以通过设置组件的style属性设置。在下方的示例代码中，我们创建了一个名词为FixedDimensionsDemo的项目，在界面上添加了三个水平排列的视图，宽高都设置成100，它们颜色分别被设置成红色、黄色、绿色。

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

export default class FixedDimensionsDemo extends Component {
  render() {
    return (
      <View>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'yellow'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
      </View>
    );
  }
}

AppRegistry.registerComponent('FixedDimensionsDemo', () => FixedDimensionsDemo);

运行结果如下图所示。由于现在市面上移动设备的屏幕大小种类繁多，我们不能仅仅通过指定具体的宽高来进行界面的布局，接下来我们需要学习使用Flexbox。

Flexbox简介

Flexbox是一种新的布局方式，这种布局方式是2009年W3C提出的方案，它可以简便且完整地完成页面的布局。目前，Flexbox已经得到所有浏览器的支持。Flexbox 从本质上就是一个 Box-model 的延伸，我们都知道 Box-model 定义了一个元素的盒模型，Flexbox 则更进一步的去规范了这些盒模型之间彼此的相对关系。使用Flexbox能更容易根据组件间的相对关系进行布局，而不需要通过已知的其他组件大小来进行界面布局。

flexDirection

指定组件style中的flexDirection属性，可以决定布局的主轴，子元素可以应该沿着水平轴(row)方向排列，也可以沿着竖直轴(column)方向排列？默认情况下，子元素是沿竖直轴(column)方向进行排列布局的。

export default class FixedDimensionsDemo extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'yellow'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
      </View>
    );
  }
}

当修改flexDirection的值时，可以改变子元素的排列方向，程序运行后的布局如下图所示。

justifyContent

指定组件style中的justifyContent属性，可以决定其子元素在主轴上的排列方式。其可选值包括：flex-start、center、flex-end、space-around以及space-between，每个可选值的含义可以参考下方的表格。

| 值 | 意义 |
| --- | --- |
| flex-start | 从开始处进行排列。 |
| center | 居中进行排列 |
| flex-end | 从结尾处进行排列。 |
| space-around | 各行在伸缩容器中平均分布，在两边各有一半的空间。 |
| space-between | 各行在伸缩容器中平均分布，在两边没有空间。 |

在代码中，通过修改justifyContent的值可以验证子元素的各种布局方式。

alignItems

指定组件style中的alignItems属性，可以决定各个子元素沿着次轴的排列方式。所谓次轴，指的是与主轴垂直的轴，例如，若主轴方向为row，则次轴方向为column。其可选值包括如下4个：flex-start、center、flex-end以及stretch，每个可选值的含义可以参考下方的表格。

| 值 | 意义 |
| --- | --- |
| flex-start | 从开始处进行排列。 |
| center | 居中进行排列 |
| flex-end | 从结尾处进行排列。 |
| stretch | 各行将会伸展以占用剩余的空间。 |

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

<View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'stretch',
}}>
    <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'yellow'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>

程序运行后，各子元素的布局与展示方式如下所示。

---