原文連結

       在web瀏覽器中，你能使用<a>標籤連結到不同的網頁。當用戶點選一個連結，URL被push到瀏覽器歷史棧中。當用戶點選返回按鈕時，瀏覽器將其從棧頂彈出，因此當前頁就是之前訪問過的網頁。React Navive並不想網頁瀏覽器一樣內嵌全域性的歷史棧，因此React Navigation閃亮登場了。

       React Navigation的棧導航器可以實現app頁面間的跳轉，也可以管理導航歷史。如果你的app只有一個棧導航器，那麼在概念上就與網路瀏覽器導航狀態相似，使用者與app互動時，頁面入棧出棧，使用者就能看到不同的介面。不同點是React Navigation提供了跳轉的手勢和動畫。

       我們只需要一個createStackNavigator的函式就可以開始了。

建立一個棧導航器

createStackNavigator函式返回了React元件。需要路由配置物件和可選的設定物件。因為其返回了元件，我們可以直接從App.js中匯出，在根元件中使用。

// 新專案的 App.js 

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});
 

如果執行這段程式碼，會看到一個帶有空導航欄和包含Home Screen元件的灰色的內容區域的頁面。介面風格是棧導航器的預設配置，我們稍後會學習如何設定。

路由名稱的大小寫並不重要，又能使用小寫home或者大寫Home，取決於你。我們更喜歡用大寫。

唯一必需的路由配置是screen元件。

在React Native中，從App.js中匯出的元件是入口點，或者根元件--其他元件都是從這裡延申出去的。相對於匯出createStackNavigator來說，更好的控制app的根元件通常更有用，所以我們可以匯出一個渲染了棧導航器的元件：

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}
 

（一個是直接匯出棧導航器，另一個是先render再匯出）

Route configuration

考慮到screen是Home頁的唯一路由配置，我們不需要使用{screen:HomeScreen}格式的配置，可以直接使用元件：

const RootStack = createStackNavigator({
  Home: HomeScreen
});

新增第二個路由

<RootStack/>元件不接收任何屬性--所有配置在options引數中指定。options屬性是空的，所以使用預設配置。為了使用options屬性，我們新增第二個screen。

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

現在我們的棧裡有兩個路由，主頁路由和詳情頁路由。主頁路由相應HomeScreen元件，詳情頁路由相應Details Screen路由。初始路由是主頁路由Home。下一章會講怎樣從Home跳轉到Details。

總結

React Native不像網頁瀏覽器一樣有內建導航器。React Navigation提供了這樣的功能。

createStackNavigator函式需要路由配置物件和options物件，返回React元件。

路由配置物件的key是路由名稱，value是路由的配置。唯一必需的屬性是screen（路由要使用的元件）。

Options物件中指定的initialRouteName是棧中的初始路由。