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 --save react-navigation

然后，安装 react-native-gesture-handler。 如果你正在使用 Expo managed workflow,那么你什么都不需要做, SDK 中已经包含了这些. 否则：

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

Link 所有的原生依赖

react-native link react-native-gesture-handler

iOS 啥都不用做

为了完成 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);
+      }
+    };
+  }
}

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

如果在混合应用中使用 React Navigation（一个同时具有Swift / ObjC 和 React Native 的 iOS 应用程序），您可能会错过 Podfile 中的` RCTLinkingIOS </ code>子规范，新的RN项目已经默认安装了。 要添加此项，请确保Podfile如下所示：

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

准备完毕， 继续阅读 "Hello React Navigation" 开始编码吧

React Navigation 简介 →