Navigation 的用處？
在一個 App 中一定會有很多頁面，
Navigation 提供簡單易用的跨平台導覽，不論在 iOS 和 Android 都可以進行轉頁、tab 和漢堡選單的轉導。

安裝 Navigation

1. 安裝 react-navigation/native

npm install @react-navigation/native

2. 安裝依賴原生以下套件

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

PS. 安裝後若是出現警告，可能是版本不同關係，可略過！

3. iOS update

cd ios
pod install

4. 在 index.js 檔案加入 react-native-gesture-handler （要在第一行）

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

5. 接著將 NavigationContainer 放在入口檔案（例如 index.js 或 App.js）

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const App = ()=> {
  return (
    <NavigationContainer>
        {/* your app code */}
    </NavigationContainer>
  );
}

export default App

安裝堆疊 stack

• 什麼是堆疊呢?
  概念雷同 web 瀏覽器導航狀態，使用 push 的方式疊上新的頁面並且記錄 history，讓使用者可以看到不同的頁面，並且還提供 Android 和 iOS 在堆疊中的路由時需要的手勢和動畫。

npm install @react-navigation/stack

• 如何使用呢?

1. 於 App.js 引入

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

2. 建立一個 首頁

const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
};

3. 放 App.js

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App

最後整個檔案是...

//App.js
import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Text, View} from 'react-native';
const Stack = createStackNavigator();

const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

整體來講基本的安裝設定已完成，接著就是 Day 14 的如何放入頁面唷～

Day 13 done！ 請多多指教