react-native 导航器 react-navigation 3.x 使用

时间:2022-11-30 20:12:43

React-navigation 介绍

  React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用 JavaScript 编写。

安装

在你的 React Native 项目中安装 react-navigation 这个包(注意--save或者--save-dev一定要写正确,链接原生库是会根据package.json文件中的dependenciesdevDependencies的记录来链接所有需要链接的库

yarn add react-navigation
# 或者使用npm
# npm install --save react-navigation

然后安装 react-native-gesture-handler ,如过你正在使用 Expo ,那么你可以跳过此步骤,因为他包含在SDK中,否则

yarn add react-native-gesture-handler
# 或者使用npm
# npm install --save react-native-gesture-handler

链接所有原生库(注意一些老的教程和文档可能会提到rnpm link命令,此命令已过期不再使用,由下面这个命令代替)

react-native link

此时IOS就不需要其他步骤了,要完成针对Android的react-native-gesture-handler的安装,请务必对 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项目跳过)

如果您在混合应用程序(一个同时具有Swift / ObjC和React Native部分的iOS应用程序)中使用React Navigation,您可能会错过RCTLinkingIOSPodfile中的子规范,该默认情况下会安装在新的RN项目中。要添加此项,请确保您的Podfile如下所示:

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

  . . . // other subspecs

  'RCTLinkingIOS',

  . . .

]