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

入门

以下内容是本文档基础部分的导览，介绍了 React Navigation 最重要的方面。它应该涵盖足够的内容，让你了解如何构建典型的小型移动应用程序，并为你深入了解 React Navigation 更高级的部分提供必要的背景知识。

先决条件​

如果你已经熟悉 JavaScript、React 和 React Native，那么你就可以快速上手 React Navigation！如果你不熟悉，我们强烈建议你首先学习一些基础知识，然后回来继续学习。

以下是一些资源可以帮助你

  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 开发，则需要安装 pod（通过 Cocoapods）来完成链接。

npx pod-install ios

react-native-screens 包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑 MainActivity.kt 或 MainActivity.java 文件，该文件位于 android/app/src/main/java/<your package name>/ 下。

将突出显示的代码添加到 MainActivity 类的主体中

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

并确保在您的包语句下方，此文件的顶部添加以下导入语句

import android.os.Bundle;

此更改是为了避免与 View 状态在 Activity 重启时无法始终如一地持久化相关的崩溃。

info

当您使用导航器（例如堆栈导航器）时，您需要按照该导航器的安装说明进行操作，以获取任何额外的依赖项。如果您收到错误“无法解析模块”，则需要在您的项目中安装该模块。

将您的应用程序包装在 NavigationContainer 中​

现在，我们需要将整个应用程序包装在 NavigationContainer 中。通常您会在您的入口文件（例如 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>
  );
}
warning

在典型的 React Native 应用程序中，NavigationContainer 应该只在您的应用程序的根目录中使用一次。除非您有特定的用例，否则您不应该嵌套多个 NavigationContainer。

现在您已准备好构建并在设备/模拟器上运行您的应用程序。

继续前往 "Hello React Navigation" 开始编写代码。