跳至主要內容
版本：6.x

入門篇

在此文件「基本要件」部分內，說明 React 導覽系統最重要層面的導覽。應涵蓋足夠的資訊，讓你了解如何建置典型的小型行動應用程式，並在你深入了解 React 導覽系統的進階部分時，可提供所需的背景資料。

先備條件​

如果你已經熟悉 JavaScript、React 及 React Native，那麼你就能快速地開始使用 React 導覽系統！如果不熟悉，我們強烈建議你首先獲得一些基礎知識，然後再回來。

這裡有一些資源可以協助你

  1. React Native Express（第 1 至第 4 部分）
  2. React 的主要概念
  3. React Hooks
  4. React Context（進階）

最低需求​

  • react-native >= 0.63.0
  • expo >= 41（如果你使用 Expo）
  • typescript >= 4.1.0（如果你使用 TypeScript）

安裝​

在 React Native 專案中安裝所需套件

npm install @react-navigation/native

React Navigation 是由一些核心程式、以及那些由導覽器用於在你的應用程式中建立導覽結構。別擔心這件事，很快就會進一步闡明！為了預載載入工作，讓我們也安裝並設定大多數導覽器所使用的依賴項，然後我們就可以開始撰寫程式碼。

我們現在安裝的函式庫包括 react-native-screens 和 react-native-safe-area-context。如果你已經安裝了這些最新版本的函式庫，那你這邊就大功告成了！否則，請繼續閱讀。

安裝依賴項到一個 Expo 管理專案​

在你的專案目錄中，執行

npx expo install react-native-screens react-native-safe-area-context

這將安裝相容版本這些函式庫。

現在你就可以繼續到 「Hello React Navigation」 來開始撰寫一些程式碼。

安裝依賴項到一個裸的 React Native 應用程式​

在你的專案目錄中，執行

npm install react-native-screens react-native-safe-area-context
注意

在安裝後，你可能會收到與同儕依賴項相關的警告。它們通常是由一些套件中指定的版本範圍有誤所造成的。只要你的應用程式建置成功，你都可以安全地忽略大多數警告。

自 React Native 0.60 及更高版本，連結已自動完成。所以你不需要執行 react-native link。

如果你使用的是 Mac 並且開發 iOS，你需要安裝莢點（透過 Cocoapods）來完成連結。

npx pod-install ios

react-native-screens 套件需要額外的設定步驟才能正確地在 Android 裝置上運作。編輯位於 android/app/src/main/java/<你的套件名稱>/ 下方的 MainActivity.kt 或 MainActivity.java 檔案。

將重點標記的程式碼新增到 MainActivity 類別的主體中。

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

並且確保在此檔案頂端於你的套件敘述下方，新增以下匯入敘述

import android.os.Bundle;

需要進行此變更才能避免發生與「檢視狀態在重新啟動 Activity 時無法持續一致」有關的崩潰問題。

資訊

當您使用導航器（例如堆疊式導航器）時，您需要遵循該導航器的安裝說明，才能取得任何其他依賴項。如果您收到「無法解決模組」錯誤，您需要在您的專案中安裝該模組。

將您的應用程式置入 NavigationContainer 中​

現在，我們需要將整個應用程式置入 NavigationContainer。通常，您會在 entry 檔案（例如 index.js 或 App.js）中執行此操作。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}
警告

在典型的 React 原生應用程式中，NavigationContainer 應該只在應用程式的根目錄中使用一次。您不應該巢狀多個 NavigationContainer，除非您有特定的使用案例。"

現在您可以進行建置，然後在裝置/模擬器上執行應用程式。

繼續〈"Hello React Navigation"〉來開始編寫程式碼。