接續上篇

點選登入後，會跳出「登入成功」提示
此時要將使用者導向首頁

那麼在React Native要如何做到「畫面導向」功能
本篇會使用react-navigation/native套件完成「畫面導向」

React Navigation Native 簡介 & 安裝

官方網站：https://reactnavigation.org/docs/getting-started/
版本：6.1.7

在Web裡，往往會使用location.href..等其他JavaScript指令完成頁面跳轉
而APP則是使用導航器（Navigator）跳轉畫面
平常在使用Facebook APP時，切換通知、個人檔案、功能表
切換功能時，就已經觸發導航器了

安裝指令
npx expo install @react-navigation/native @react-navigation/native-stack
官網指示Expo專案需安裝其餘兩項依賴項目
npx expo install react-native-screens react-native-safe-area-context

使用方法

延續上篇登入頁結構，建立空白首頁、導航器Js
路徑結構如以下所示

PracticeExpoApp
├── App.js
├── Navigation
│   └── AppNavigator.js //導航器
├── app.json
├── babel.config.js
├── img
│   └── logo.png
├── package-lock.json
├── package.json
├── src
│   └── Home
│       ├── IndexScreen.js //首頁畫面
│       └── LoginScreen.js //登入畫面
└── tailwind.config.js

React Navigation 導航器製作

在AppNavigator.js引入這兩項

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

NavigationContainer為最外層導航容器，管理、監聽所有子導航器的內容
createStackNavigator堆疊導航器，可以將所有元件組裝成一座導航橋樑，互相溝通

將登入畫面、首頁畫面放到導航容器裡

import LoginScreen from "../src/Home/LoginScreen";
import IndexScreen from "../src/Home/IndexScreen";

export default function AppNavigator() {
  const RootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <RootStack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="Login"
      >
        <RootStack.Screen
          name="Index"
          component={IndexScreen}
          options={{ title: "首頁" }}
        />
        <RootStack.Screen
          name="Login"
          component={LoginScreen}
          options={{ title: "登入" }}
        />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

程式碼講解：

• screenOptions可以設定導航器標題、樣式、是否顯示標題(title)
• RootStack名稱可以自行定義
• initialRouteName可以選擇預設畫面(對應到自行定義的name)
• 有幾個component就做幾個Screen，component裡還能在做Stack
  也就是說，首頁裡還會有會員管理、群組管理、XX功能...等
  就能在區分成：會員管理Stack、群組管理Stack
  不會所有Screen都擠在RootStack
  ※這段分層導航解釋會有些複雜，建議先將所有功能完成再回頭規劃

修改起始頁、登入、首頁畫面

• App.js 引入剛剛完成的導航容器並放入

import AppNavigator from "./Navigation/AppNavigator";
export default function App() {
  return (
    <SafeAreaView className="flex-1">
      <StatusBar style="auto" />
      <AppNavigator />
    </SafeAreaView>
  );
}

• LoginScreen.js 加入導航功能
  直接修改export部分，加上navigation參數
  export default function LoginScreen({ navigation })
  因為畫面已經封裝在導航容器裡
  所以只要增加了navigation參數，就能使用導航相關功能

function onLogin() {
    if (loginInfo.Account === "" || loginInfo.Password === "") {
      Alert.alert("失敗","請輸入使用者資訊");
      return false;
    } else{
      Alert.alert("訊息", "登入成功!");
      navigation.navigate("Index");
    }
}

※navigation.navigate帶的參數是name而不是component
可參考上方AppNavigator.js程式碼

• IndexScreen.js 做個簡單的首頁

import { View, Text } from "react-native";

export default function IndexScreen({ navigation }) {
  return (
    <View className="flex-1 items-center justify-center">
      <Text>我是登入後首頁</Text>
    </View>
  );
}

來看一下結果

成功看到導航後畫面🆗

結語：
到這邊，你的APP已經能正常登入
讓使用者進入登入後首頁畫面

不過目前會有一個問題是
只要重新打開APP，又會返回登入畫面
甚至沒有「登出」功能
舉個例子，Facebook和Instagram就算重新開APP
也不會重新要求使用者輸入帳號密碼

當然有些APP會有例外(Ex:網銀、金流相關APP)
牽扯到「錢」一定要加強資安保護，閒置過久就要重新登入的機制

在開發「永久性登入登出機制」前
下一篇，將回頭講解React Native 基礎進階知識
也就是Effect Hooks、Context Hooks及儲存容器(AsyncStorage)。