在 React Native App 上导入 OpenCV 时出错

Question

注意：我是 React Native 和 OpenCV 的新手

所以我想在我的 react native 应用程序上使用 openCV，似乎只有几个指南。我发现的一篇是这篇文章： https://brainhub.eu/library/opencv-react-native-image-processing/

这篇文章让我很困惑，这让我想到了这个话题： How can I import OpenCV library to React-Native project

关于如何将 openCV 集成到 react native 中的详细回复，因此我尝试遵循确切的步骤，当我运行它时，应用程序总是强制关闭并在 Android Studio Logcat 上给我这个警告

7866-7976/com.reactnativeopencv E/unknown:ReactNative：本地调用异常 java.lang.RuntimeException：无法加载脚本。确保您正在运行 Metro（运行“react-native start”）或您的捆绑包“index.android.bundle”已正确打包以供发布。 在 com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets（本机方法） 在 com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:234) 在 com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:29) 在 com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:263) 在 com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1293) 在 com.facebook.react.ReactInstanceManager.access$1100(ReactInstanceManager.java:131) 在 com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:1023) 在 java.lang.Thread.run(Thread.java:919)

我所做的唯一区别是我在 MainApplication.java 上为 RNOpenCVLibrary 包和 util.log 添加了一些导入

import android.content.Context;
import android.util.Log; //this

import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import com.reactlibrary.RNOpenCvLibraryPackage; //and this

import java.lang.reflect.InvocationTargetException;
import java.util.List;
import org.opencv.android.OpenCVLoader;

我尝试使用 react-native start 和 react-native run-android 构建应用程序，但结果仍然相同

这是我的反应原生信息：

System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
    Memory: 402.28 MB / 7.95 GB
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
 npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

有人知道这个错误的答案吗？

Answer 1

您好，我最近这样做了，老实说，我真的不知道是什么问题是它再次教程步骤或 gradle 版本或其他东西，但不知何故我让它工作了。我希望他们有一天能尽快升级他们的文档。

在这里你可以使用我的 repo 来构建你的应用程序：React-Native OpenCV 2021 Integration

模糊图像的教程示例正在运行。

编辑： 版本号很重要，因为如果它们不兼容，gradle build 将会失败。

OpenCV 库：4.5.0 梯度：6.7 插件：4.1.0

还要确保仔细阅读 android studio 警告和错误， 因为他们告诉您还要将 maven() 添加到您的 build.gradle 文件中并将 minSdkVersion 更改为 21，因为它是 react native 0.64 的最小值，它再次在示例 repo 中使用。

不仅在 build.gradle 的顶层，而且在任何提到这些变量的地方更改此版本，以便 gradle 文件将同步。

    ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
    }

    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }

应用级 build.gradle，将您的版本设置为 1_8，因为它在我们的例子中是兼容的：

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }