4.x

Edit

Getting started

React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求，它完全使用 JavaScript 编写（因此你可以阅读并理解所有源码）。

在决定为你的项目使用 React Navigation 之前，你可能需要先阅读 缺点 — 这篇文章，它会帮助你理解我们所做出的权衡，以及我们认为这个库目前存在缺陷的地方

期待什么？

如果你已经熟悉了React Native，那么你可以快速上手React Navigation， 如果还没有，你可能需要先阅读 React Native Express （1-4章），读完后再回来。

本文档的* Fundamentals *章节中的内容是对 React Navigation 最重要的几方面的介绍。 应该足够让你了解如何构建典型的小型移动应用，并为你提供了需要深入了解 React Navigation 更高级部分的背景信息。

从一个小模版开始演示 ReactNavigation 的用法

使用 react-navigation 的最简单方式,就是使用 expo-cli 初始化一个项目 你可已使用 npm i -g expo-cli 进行安装

  • 如果你要创建一个 managed React Native project 请在Managed工作流的开始选择blank模板
  • 如果你想创建一个 原生的 React Native 项目, 在 Bare 工作流的开始选择 minimal 模版
  • 如果你喜欢TypeScript,两种情况下,你都可以选择模板的TypeScript版本。 React Navigation 附带TypeScript类型。

项目初始化成功后, 只要运行命令:expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens就可以了 现在你可以继续阅读 "Hello React Navigation" 来写一些代码

在已创建的项目中安装 React Navigation

在你的 React Native 项目中安装react-navigation这个包

yarn add react-navigation
# or with npm
# npm install react-navigation

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

接下来,我们需要安装的是 react-native-gesture-handler、 react-native-reanimated 和 react-native-screens. 如果你已经安装了这些库,并且是最新版本,那么到这儿就完成了 否则，请继续阅读。

给 Expo 管理的项目安装依赖

在项目根目录运行命令: expo install react-native-gesture-handler react-native-reanimated 这将安装这些库的兼容版本

现在你可以继续阅读 "Hello React Navigation" 来写一些代码

给原生的 React Native 项目安装依赖

在项目根目录运行命令: yarn add react-native-reanimated react-native-gesture-handler [email protected]^1.0.0-alpha.23

接下来，我们需要链接这些库。 接下来的步骤取决于你的 React Native 版本：

  • React Native 0.60 及更高版本

    在新版本的 React Native 中 链接是自动的(我们不再需要手动的 link 一个 库).

    为了在 iOS 上完成自动链接, 请确保你已经安装了Cocoapods 然后运行命令:

  cd ios
  pod install
  cd ..

为了完成 react-native-screens 在 Android 上的安装, 请在android/app/build.gradle 中 dependencies 选项中添加下面这两行:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  • React Native 0.59 及更低版本

如果你在使用更老版本的 React Native, 你需要手动链接依赖 运行命令:

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens

为了支持依赖使用 androidx,你还需要配置 jetifier :

yarn add --dev jetifier
# or with npm
# npm install --save-dev jetifier

然后将下面的内容添加到 package.json 中的 postinstall 选项中:

"scripts": {
  "postinstall": "jetifier -r"
}

注意: 当你升级到 React Native 0.60 或更高版本后, 记得将配置这些删除

现在,手动运行 postinstall 脚本:

yarn postinstall
# or with npm
# npm run postinstall

为了完成 react-native-gesture-handler 在 Android 上的安装,请在 MainActivity.java 中做如下修改:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;

+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

现在可以在真机/模拟器上运行你的 App 啦

继续阅读 "Hello React Navigation" 开始编码吧

React Navigation 简介 →