4.x

Edit

Getting started

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

Before you commit to using React Navigation for your project, you might want to read the anti-pitch — it will help you to understand the tradeoffs that we have chosen along with the areas where we consider the library to be deficient currently.

期待什么？

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

The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. 如果你已经安装了这些库,并且是最新版本,那么到这儿就完成了 否则，请继续阅读。

给 Expo 管理的项目安装依赖

In your project directory, run:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

This will install versions of these libraries that are compatible.

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

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

In your project directory, run:

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

Note: You might get warnings related to peer dependencies after installation. They are usually caused my incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.

接下来，我们需要链接这些库。 The steps depends on your React Native version:

  • 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, 你需要手动链接依赖 To do that, run:

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens
react-native link react-native-safe-area-context

You also need to configure jetifier to support dependencies using androidx:

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

Then add it to the postinstall script in package.json:

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

Note: Remember to remove this when you upgrade to React Native 0.60 and higher.

Now, run the postinstall script manually:

yarn postinstall
# or with npm
# npm run postinstall

To finalize installation of react-native-gesture-handler for Android, make the following modifications to 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);
+      }
+    };
+  }
}

Then add the following at the top of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';

Note: When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies. If you're getting an error "Unable to resolve module", you need to install that module in your project.

Now you are ready to build and run your app on the device/simulator.

Continue to "Hello React Navigation" to start writing some code.

React Navigation 简介 →