快速开始

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

必要条件

如果您已经熟悉 JavaScript、React 和 React Native，那么您将能够快速开始使用 React Navigation！如果没有，我们强烈建议您先获得一些基本知识，完成后再回到这里。
以下是一些可以帮助您的资源：
React Native Express (第1到4节)
React 的主要概念
React 钩子
React 上下文 (高级)

最低版本要求

React-Native >= 0.63.0

expo >= 41 (如果你使用expo)

typescript >= 4.1.0

安装

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

React Navigation 由一些核心实用程序组成，然后导航器使用这些程序在您的应用程序中创建导航结构。暂时不用太在意这个，你很快就会明白的！为了前端安装工作，我们还要安装和配置大多数导航器使用的依赖项，然后我们可以开始编写一些代码。
我们现在要安装的库是react-native-screens和react-native-safe-area-context。如果您已经安装了这些库并且是最新版本，那么安装准备就完成了！否则，请继续阅读。

在Expo项目管理安装依赖项

在您的项目目录中，运行：

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

这将安装这些库的兼容版本。
您现在可以继续“Hello React Navigation”开始编写一些代码。

在空的ReactNative项目中安装依赖项

在您的项目目录中，运行：

# npm
npm install react-native-screens react-native-safe-area-context
# yarn
yarn add 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.java位于android/app/src/main/java/<your package name>/MainActivity.java.
将以下代码添加到MainActivity类的主体中：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并确保在此文件顶部添加导入语句：

import android.os.Bundle;

需要进行此更改以避免与 View 状态相关的崩溃在 Activity 重新启动时不一致。

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

使用NavigationContainer把你的app包起来

现在，我们需要将整个应用程序放置在在NavigationContainer. 通常你会在你的入口文件中这样做，例如index.jsor 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除非您对它们有特定的用例，否则不应嵌套多个。

现在您已准备好在设备/模拟器上构建和运行您的应用程序。
继续“Hello React Navigation”开始编写一些代码。