使用導航跳轉頁面

通常應用程式通常不會只由一個頁面組成，而多個頁面之間的呈現和轉換的組件就是我們通常說的導航。
基本導航的設定： 如何在React Native應用程序中設定基本的導航結構，實現頁面之間的切換。

React Navigation

React Navigation 提供了簡單好用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻頁式、tab 選項卡式和抽屜式的導航佈局。

React Navigation的使用

首先，需要安裝React Navigation庫。

npm install --save react-navigation

接下來就可以快速創建一份有兩個頁面（Home和Profile）的應用程式了：

import {
  StackNavigator,
} from 'react-navigation';

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

每一個<screen>組件都可以單獨設定導航選項，例如導航的標題。還可以使用<navigation>屬性中的方法區跳轉到別的頁面：

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Kelly's profile"
        onPress={() =>
          navigate('Profile', { name: 'Kelly' })
        }
      />
    );
  }
}

<React Navigtion>的路由寫法使其非常容易擴展導航邏輯，或是整合到<redux>中。由於路由可以嵌套使用，因而開發者可以故居不同的頁面來寫不同的導航邏輯，也不會互相影響。

參考資料：https://rn.wlfcss.com/react-native/docs/navigation.html