在螢幕之間導航

行動應用程式很少由單一螢幕組成。管理多個螢幕的呈現和螢幕之間的轉換，通常由所謂的導航器來處理。

本指南涵蓋 React Native 中可用的各種導航組件。如果您剛開始使用導航，您可能會想使用 React Navigation。React Navigation 提供了一種簡單明瞭的導航解決方案，能夠在 Android 和 iOS 上呈現常見的堆疊導航和標籤式導航模式。

如果您要將 React Native 整合到已經以原生方式管理導航的應用程式中，或者正在尋找 React Navigation 的替代方案，則以下函式庫在兩個平台上都提供原生導航：react-native-navigation。

社群針對導航的解決方案是一個獨立的函式庫，開發人員只需幾行程式碼即可設定應用程式的螢幕。

安裝與設定

首先，您需要在專案中安裝它們

shell
npm install @react-navigation/native @react-navigation/native-stack

接下來，安裝必要的同層級相依性。您需要根據您的專案是 Expo 管理專案還是裸機 React Native 專案來執行不同的命令。

如果您有 Expo 管理專案，請使用 expo 安裝相依性

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

如果您有裸機 React Native 專案，請使用 npm 安裝相依性
shell
```
npm install react-native-screens react-native-safe-area-context
```
對於使用裸機 React Native 專案的 iOS，請確保您已安裝 CocoaPods。然後安裝 pods 以完成安裝
shell
```
cd ios
pod install
cd ..
```

注意

您在安裝後可能會收到與同層級相依性相關的警告。它們通常是由某些套件中指定的不正確版本範圍引起的。您可以安全地忽略大多數警告，只要您的應用程式可以建置即可。

現在，您需要將整個應用程式包裝在 NavigationContainer 中。通常您會在您的入口檔案中執行此操作，例如 index.js 或 App.js

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

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

export default App;

現在您已準備好在裝置/模擬器上建置並執行您的應用程式。

用法

現在您可以建立一個具有首頁畫面和個人資料畫面的應用程式

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

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

在此範例中，有 2 個畫面（Home 和 Profile）使用 Stack.Screen 組件定義。同樣地，您可以定義任意數量的畫面。

您可以在 Stack.Screen 的 options 屬性中為每個畫面設定選項，例如畫面標題。

每個畫面都會取得一個 component 屬性，它是一個 React 組件。這些組件會收到一個名為 navigation 的屬性，其中包含連結到其他畫面的各種方法。例如，您可以使用 navigation.navigate 前往 Profile 畫面

tsx
const HomeScreen = ({navigation}) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
};
const ProfileScreen = ({navigation, route}) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

此 native-stack 導航器使用原生 API：iOS 上的 UINavigationController 和 Android 上的 Fragment，因此使用 createNativeStackNavigator 建置的導航將具有相同的行為，並且具有與基於這些 API 原生建置的應用程式相同的效能特徵。

React Navigation 也具有適用於不同類型導航器（例如標籤頁和抽屜）的套件。您可以使用它們在您的應用程式中實作各種模式。

如需 React Navigation 的完整介紹，請遵循 React Navigation 入門指南。

React Navigation​

安裝與設定​

用法​

React Navigation

安裝與設定

用法