跳到主要内容
版本：7.x

开始使用

本文档基础知识部分接下来将介绍 React Navigation 最重要的方面。它应该涵盖足够让您了解如何构建典型的移动应用程序，并为您提供深入研究 React Navigation 更高级部分所需的背景知识。

先决条件​

如果您已经熟悉 JavaScript、React 和 React Native，那么您将能够快速开始使用 React Navigation！如果不是，我们强烈建议您先掌握一些基础知识，然后在完成后再回到这里。

以下是一些可以帮助您的资源

  1. React Native
  2. React 的主要概念
  3. React Hooks
  4. React Context（高级）

最低要求​

  • react-native >= 0.72.0
  • expo >= 52（如果您使用 Expo Go）
  • typescript >= 5.0.0（如果您使用 TypeScript）

入门模板​

如果您正在启动一个新项目，您可以使用React Navigation 模板快速设置一个使用静态配置的新项目

npx create-expo-app@latest --template react-navigation/template

请参阅项目的 README.md 以获取有关如何开始使用的更多信息。

如果您使用模板创建了一个新项目，您可以跳过下面的安装步骤，直接转到“你好 React Navigation”。

否则，您可以按照以下说明将 React Navigation 安装到您现有的项目中。

安装​

在您的 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

这将安装与这些库兼容的版本。

您现在可以继续“你好 React Navigation”开始编写一些代码。

将依赖项安装到裸 React Native 项目中​

在您的项目目录中，运行

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

安装后，您可能会收到与对等依赖项相关的警告。它们通常是由某些包中指定的不正确的版本范围引起的。只要您的应用程序可以构建，您就可以安全地忽略大多数警告。

如果您使用的是 Mac 并且正在为 iOS 开发，则需要安装 pods（通过 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;

需要此更改以避免与 View 状态在 Activity 重启时未持续一致相关联的崩溃。

信息

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

设置 React Navigation​

安装并配置依赖项后，您可以继续设置您的项目以使用 React Navigation。

使用 React Navigation 时，您需要在您的应用程序中配置导航器。导航器处理应用程序中屏幕之间的过渡，并提供 UI，例如标题、标签栏等。

配置导航器主要有两种方式

静态配置​

静态配置 API 减少了样板代码，并简化了 TypeScript 类型和深度链接等内容。如果您正在启动一个新项目或刚开始使用 React Navigation，这是推荐的方式来设置您的应用程序。如果您将来需要更大的灵活性，您可以始终与动态配置混合搭配使用。

继续“你好 React Navigation”，开始使用静态 API 编写一些代码。

动态配置​

动态配置允许更大的灵活性，但需要更多的样板代码和配置（例如，对于深度链接、typescript 等）。

要开始使用动态配置，首先，我们需要将您的应用程序包装在 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>
  );
}
警告

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

继续“你好 React Navigation”，开始使用动态 API 编写一些代码。