3.x

Edit

入门

目前 React Navigation 正在维护中，欢迎有兴趣参与或学习交流 React Native的小伙伴加入，一群群号：672509442（已满）。二群群号：670855726 (已满). 三群群号: 799180596


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

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

期待什么？

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

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

安装

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

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

Next, install react-native-gesture-handler and react-native-reanimated.

If you're using Expo, to ensure that you get the compatible versions of the libraries you should run:

expo install react-native-gesture-handler react-native-reanimated

Otherwise, just use yarn or npm directly:

yarn add react-native-gesture-handler react-native-reanimated
# or with npm
# npm install react-native-gesture-handler react-native-reanimated

Next, if you are not using the Expo managed workflow then you need to link these libraries if you haven't already. The steps depends on your React Native version:

  • React Native 0.60 and higher

    On newer versions of React Native, linking is automatic.

    On iOS, to complete the linking, make sure you have Cocoapods installed. Then run:

    cd ios
pod install
cd ..

    On Android, it shouldn't need any more steps. But if you get errors regarding Android Support library during building the app, you need to install and configure jetifier.

  • React Native 0.59 and lower

    If you're on an older React Native version, you need to manually link the dependencies. To do that, run:

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

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

Finally, run react-native run-android or react-native run-ios to launch the app on your device/simulator.

混合iOS应用（仅针对RN项目请跳过）

If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the RCTLinkingIOS subspec in your Podfile, which is installed by default in new RN projects. To add this, ensure your Podfile looks like the following:

 pod 'React', :path => '../node_modules/react-native', :subspecs => [
    . . . // other subspecs
    'RCTLinkingIOS',
    . . .
  ]

You're good to go! Continue to "Hello React Navigation" to start writing some code.

React Navigation 简介 →