文章目錄

• React-navigation
• • 一、安裝
  • • 1.1 安裝依賴到React Native項目

React-navigation

React-navigation官網

移動端沒有像 Web 一樣自帶導航功能， react-navigation 是RN推薦的移動端導航工具。

一、安裝

參考安裝

npm install @react-navigation/native
或
yarn add @react-navigation/native
           

React Navigation由一些核心實用程式組成，然後，導航程式将這些實用程式用于在您的應用程式中建立導航結構。現在不必為此擔心太多，它很快就會變得清楚起來！為了提前完成安裝工作，我們還要安裝和配置大多數導航器使用的依賴項，然後我們就可以開始編寫一些代碼了。

我們現在将安裝這些庫

react-native-gesture-handler

，

react-native-reanimated

，

react-native-screens

和

react-native-safe-area-context

和

@react-native-community/masked-view

。如果您已經安裝了這些庫，并且已安裝了最新版本，則在這裡完成！否則，請繼續閱讀。

1.1 安裝依賴到React Native項目

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

注意：安裝後，您可能會收到與對等項依賴項有關的警告。它們通常是由某些軟體包中指定的版本範圍不正确引起的。隻要您的應用可以建構，您就可以放心地忽略大多數警告。

注意：如果将此項目與react-native-windows一起使用，請省略react-native-gesture-handler。

從React Native 0.60及更高版本開始，連結是自動的。是以，您無需運作

react-native link

。

如果您使用Mac并正在為iOS開發，則需要安裝Pod（通過Cocoapods）以完成連結。

npx pod-install ios
           

要完成安裝

react-native-gesture-handler

，請在條目檔案的頂部（確定其位于頂部，并且沒有其他内容）添加以下内容，例如

index.js

或

App.js

：

注意：如果要針對Android或iOS進行建構，請不要跳過此步驟，否則即使在開發中工作正常，您的應用也可能會在生産中崩潰。這不适用于其他平台。

現在，我們需要将整個應用程式包裝在中

NavigationContainer

。通常，您可以在條目檔案中執行此操作，例如

index.js

或

App.js

：

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

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

注意：使用導航器（例如堆棧導航器）時，您需要按照該導航器的安裝說明進行操作，以擷取任何其他依賴項。如果出現錯誤“無法解析子產品”，則需要在項目中安裝該子產品。