React-navigation

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：

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>
  );
}

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