# 入门指南

在本文档的“基础知识”部分是 React Navigation 最重要内容。 它应该涵盖了足够的知识,使您知道如何构建典型的小型移动应用程序,并为您提供了深入研究 React Navigation 的更高级部分所需的背景知识。

# 先决条件

如果您已经熟悉 JavaScript,React 和 React Native,那么您将能够快速使用 React Navigation! 如果没有,我们强烈建议您先获得一些基本知识,然后在完成后再回到这里。

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

  1. React Native Express (opens new window) (Sections 1 to 4)
  2. Main Concepts of React (opens new window)
  3. React Hooks (opens new window)
  4. React Context (opens new window) (Advanced)

# 安装

在 React Native 项目中安装所需的包:

npm install @react-navigation/native

React Navigation 由一些核心实用程序组成,然后,导航程序将这些实用程序用于在您的应用程序中创建导航结构。 现在不必为此担心太多,它很快就会变得清楚起来! 为了提前完成安装工作,我们还要安装和配置大多数导航器使用的依赖项,然后我们就可以开始编写一些代码了。

我们现在将安装的库是 react-native-gesture-handlerreact-native-reanimatedreact-native-screensreact-native-safe-area-context@react-native-community/masked-view。 如果您已经安装了这些库,并且已安装了最新版本,则在这里完成! 否则,请继续阅读。

# 将依赖项安装到 Expo 管理的项目中

在你的项目目录下,运行:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

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

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

# 将依赖项安装到空 React Native 项目

在你的项目目录下,运行:

npm install 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 链接。

如果您使用 Mac 并正在为 iOS 开发,则需要安装 Pod(通过 Cocoapods)以完成链接。

npx pod-install ios

要完成 react-native-gesture-handler 的安装,请在入口文件(例如 index.js 或 App.js)的顶部(确保它位于顶部,并且没有其他内容)之前添加以下内容:

import 'react-native-gesture-handler';

注意:如果要针对 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>
  );
}

注意:使用导航器(例如堆栈导航器 stack navigator)时,您需要按照该导航器的安装说明进行操作,以获取任何其他依赖项。 如果出现错误 “Unable to resolve module”,则需要在项目中安装该模块。

现在,您可以在设备/模拟器上构建并运行您的应用程序了。

继续 “Hello React Navigation” 以开始编写一些代码。