在手機上打開一個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>

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

---