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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

React-navigation 介绍

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

安装

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

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',

　　. . .

]

由于我的项目是基于rn0.55.4版本，react-navigation说0.50以上就可以用，但是安卓无法使用

错误解决

首先请允许我使用二号标题来吐槽一下，官方文档说rn 0.50.x版本以上都是没问题的，但是按照文档还是报错，现在大部分新版本的库都需要升级gradle版本，理论上大部分安装新版本的第三方库，比如

 react-native-vector-icons ，都是依赖新版本了（现在rn版本是57），貌似57版本已经升级了gradle，就这样吧。

以下是错误以及解决方法。

错误关键字

Could not find method compileOnly() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

完整报错信息

FAILURE: Build failed with an exception.
* Where:
Build file '/Users/mao/Desktop/lzbk/mpx/node_modules/react-native-gesture-handler/android/build.gradle' line: 32
* What went wrong:
A problem occurred evaluating project ':react-native-gesture-handler'.
> Could not find method compileOnly() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

 解决

1.改变配置android/build.gradle。

buildscript {
    repositories {
        jcenter()
        google() // ++
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'// 修改版本
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        google() // ++
    }
}

 打开 ...\node_modules\react-native-vector-icons\android\build.gradle ，你会发现classpath中的gradle版本是3.1.4，这就是我们需要进行此更改的原因。

2.在你的android项目中，打开 android/gradle/wrapper/gradle-wrapper.properties ，修改distributionUrl：

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

由于此库依赖于3.1.4之上的gradle版本，所以更新gradle版本。

现在重新运行 react-native run-android 就可以了（注意，这时候会下载新版本的gradle，会需要一段时间）

 更多api等待更新中。。。

以上是 react-native 导航器 react-navigation 3.x 使用 的全部内容， 来源链接： utcz.com/z/384138.html

回到顶部