如何将 OpenCV 库导入 React-Native 项目

本文介绍了如何将 OpenCV 库导入 React-Native 项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试通过本机代码导入 OpenCV 但没有成功，我也尝试过 react-native-opencv库，但该库不包含所有 OpenCV 方法.

I tried to import OpenCV via native code but that not worked and I also tried react-native-opencvlibrary but that library doesn't contain all OpenCV methods.

如何在我的 react-native 项目中使用 OpenCV?

How can I achieve to use OpenCV in my react-native project?

提前致谢.

推荐答案

我已经在 react-native 中与 OpenCV 苦苦挣扎了一个星期，现在终于让它工作了.有这篇非常好的文章 https://brainhub.eu/blog/opencv-react-native-image-processing/ 连同这个 repo https://github.com/brainhubeu/react-native-opencv-tutorial 详细描述了如何让它运行.但是，我无法通过按照所描述的步骤或按照我能找到的任何其他教程/视频来使此存储库中的代码工作.因此，如果有人遇到同样的问题，您可以尝试以下步骤，使上述存储库中的应用程序在我的 Android 10 设备上与 OpenCV v4.5 配合使用.

I have been struggling with OpenCV in react-native for a week now and finally got it working. There is this very good article https://brainhub.eu/blog/opencv-react-native-image-processing/ together with this repo https://github.com/brainhubeu/react-native-opencv-tutorial which describes in details on how to do get it running. However I could not make the code from this repo working by following the steps described or following any other tutorial/video I could find. So in case if anyone is facing the same problem you can try this steps that made the app from the mentioned repo working with OpenCV v4.5 on my Android 10 device.

打开终端并初始化新的 React-Native 项目

Open terminal and initialize new React-Native project

npx react-native init NAME_OF_YOUR_PROJECT

导航到路径/main

Navigate to path /main

cd NAME_OF_YOUR_PROJECT/android/app/src/main

创建名为 jniLibs 的新文件夹

Create new folder named jniLibs

mkdir jniLibs

从 https://opencv.org/下载并提取最新的 Android OpenCV(使用 OpenCV 4.5 测试)发布/

重命名sdk"解压文件夹(OpenCV-android-sdk)中的文件夹到opencv"

Rename the "sdk" folder in the extracted folder (OpenCV-android-sdk) to "opencv"

将内容从提取的文件夹 (OpenCV-android-sdk/opencv/native/libs/) 复制到新创建的 ./jniLibs

Copy content from extracted folder (OpenCV-android-sdk/opencv/native/libs/) to newly created ./jniLibs

cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs

打开 Android Studio 并打开项目目录的 Android 文件夹

Open Android Studio and open Android folder of your projects dir

文件 ->打开 ->选择 */NAME_OF_YOUR_PROJECT/android

File -> Open -> select */NAME_OF_YOUR_PROJECT/android

将 OpenCV 导入您的项目

Import OpenCV to your project

文件 ->新 ->导入模块 ->选择你重命名为opencv的文件夹

File -> New -> Import module -> select the folder you renamed to opencv

(重要提示！有些教程说要选择此文件夹中的java"文件夹 - 不要这样做)

(IMPORTANT! Some tutorials say to select the "java" folder inside this folder - don't do that)

在 Gradle Scripts 下:打开 build.gradle(:opencv) 和 build.gradle(YOUR_PROJECT_NAME)将两者都更改为匹配的数字 - 就我而言:

Under Gradle Scripts: open build.gradle(:opencv) and build.gradle(YOUR_PROJECT_NAME)Change both to matching numbers - in my case:

minSdkVersion = 21

compileSdkVersion = 29

将 opencv 添加到项目依赖项

Add opencv to projects dependencies

文件 ->项目结构 ->依赖关系 ->选择应用程序并按+"符号(位于所有依赖项下方")->选中 opencv 旁边的复选框 ->按确定

File -> Project Structure -> Dependencies -> select app and press the "+" sign (located "underneath All dependencies") -> check the checkbox next to opencv -> press OK

在 build.gradle(YOUR_APP_NAME) 中将 gradle 的版本更改为 4.1.0

In build.gradle(YOUR_APP_NAME) change version of gradle to 4.1.0

dependencies {
    classpath("com.android.tools.build:gradle:4.1.0")
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

现在打开 build.gradle(Project: NAME_OF_YOUR_PROJECT .app) 并在编译选项中更改 java 版本并添加带有一些 pickfirst 选项的 packagin 选项.还启用 multidex 选项，如果您希望使用 react-native-camera 添加缺少的维度策略.应该看起来像这样:

Now open build.gradle(Project: NAME_OF_YOUR_PROJECT .app) and change java version in compile options and add packagin option with some pickfirst option. Also enable multidex option and if you wish to use react-native-camera add the missing dimension strategy. Should look something like this:

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}



 packagingOptions {
       pickFirst 'lib/x86/libc++_shared.so'
       pickFirst 'lib/x86_64/libc++_shared.so'
       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
       pickFirst 'lib/arm64-v8a/libc++_shared.so'
   }

   defaultConfig {
       applicationId "com.stackoverflow" // !!! if copy-pasting change applicationId to yours
       minSdkVersion rootProject.ext.minSdkVersion
       targetSdkVersion rootProject.ext.targetSdkVersion
       versionCode 1
       versionName "1.0"
       multiDexEnabled true
       missingDimensionStrategy 'react-native-camera', 'general'
   }

打开 build.gradle(:opencv) 并在默认配置中启用 multidex 选项.如果您希望使用 react-native-camera，那么还要添加缺失维度策略.应该看起来像这样

Open build.gradle(:opencv) and enable multidex option in default config. If you wish to use react-native-camera then also add missing dimension strategy. Should look something like this

defaultConfig {
    minSdkVersion 21
    targetSdkVersion 29

    versionCode openCVersionCode
    versionName openCVersionName
    multiDexEnabled true
    missingDimensionStrategy 'react-native-camera', 'general'

    externalNativeBuild {
        cmake {
            arguments "-DANDROID_STL=c++_shared"
            targets "opencv_jni_shared"
        }
    }
}

还要在编译选项中更改 java 的版本(必须与 build.gradle(:app) 中的相同.应该看起来像这样

Also change the version of java in compile options (must be same as in build.gradle(:app). Should look something like this

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

将以下用户权限添加到您的/PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml

Add the following user permissions to your /PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

打开 gradle 包装器属性 (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) 并更改 gradle 的版本号

Open gradle wrapper properties (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) and change the version number of gradle

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

转到/YOUR_PROJECT_PATH/android/app/src/main/java/com/并创建 reactlibrary 文件夹，然后在该文件夹中创建两个文件:

Go to /YOUR_PROJECT_PATH/android/app/src/main/java/com/ and create reactlibrary folder then create two files inside that folder:

RNOpenCvLibraryModule.java

RNOpenCvLibraryPackage.java

使用与此 GIT 存储库中相同的内容填充它们 https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary

Fill them with the same content as found on this GIT repo https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary

打开 MainApplication.java 并添加这个packages.add(new RNOpenCvLibraryPackage());"；到 getPackage() 方法.应该看起来像这样:

Open MainApplication.java and add this "packages.add(new RNOpenCvLibraryPackage());" to getPackage() method. Should look something like this:

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new RNOpenCvLibraryPackage()); // ADD THIS
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
}

还要将此添加到 onCreate() 方法中:

Also add this to the onCreate() method:

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    if (!OpenCVLoader.initDebug()) { // ADD THIS
      Log.d("OpenCv", "Error while init"); // AND THIS
    } // DON'T FORGET THE "}"
  }

不要忘记在MainApplication.java"的开头添加适当的导入

Dont forget to add proper imports in the begining of your "MainApplication.java"

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

同步您的项目

Syncronize your project

文件 ->将您的项目与 Gradle 文件同步

File -> Syncronize Your Project with Gradle Files

打开终端并导航到您的项目.添加这个包

Open the terminal and navigate to your project. Add this packages

cd /PATH_TO_YOUR_PROJECT/
npm i react-native-easy-toast --save
npm i react-native-svg --save
npm install --save react-native-camera@git+https://[email protected]/react-native-community/react-native-camera.git

(确保 react-native-camera 是从 GIT repo 安装的，否则你会遇到错误)

(Make sure react-native-camera is installed from GIT repo otherwise you will encounter errors)

创建名为src"的新文件夹在您的 PROJECT_PATH 中并复制此存储库的内容(https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src")src"；文件夹到你的 (/PATH_TO_YOUR_PROJECT/src/)

Create new folder nammed "src" in your PROJECT_PATH and copy the content of this repos ("https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src") "src" folder to yours (/PATH_TO_YOUR_PROJECT/src/)

mkdir src

复制此 repos 的内容https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js"；App.js 文件并替换您的 App.js 文件(位于 YOUR_PROJECT_PATH)中的内容

Copy the content of this repos "https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js" App.js file and replace the content in your App.js file (located in YOUR_PROJECT_PATH)

开始反应原生

npx react-native start

在 Android 设备上运行

Run on Android device

npx react-native run-android

这篇关于如何将 OpenCV 库导入 React-Native 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！