我尝试通过本机代码导入 OpenCV，但没有成功，我还尝试了 react-native-opencv 库，但该库不包含所有 OpenCV 方法。
如何在我的 react-native 项目中使用 OpenCV？
提前致谢。
【问题讨论】：
标签： react-native opencv
我已经在 react-native 中使用 OpenCV 苦苦挣扎了一周，终于让它工作了。有这篇非常好的文章 https://brainhub.eu/blog/opencv-react-native-image-processing/ 和这个 repo https://github.com/brainhubeu/react-native-opencv-tutorial 详细描述了如何让它运行。但是，我无法通过按照描述的步骤或按照我能找到的任何其他教程/视频来使这个 repo 中的代码工作。因此，如果有人遇到同样的问题，您可以尝试这些步骤，使上述存储库中的应用程序在我的 Android 10 设备上与 OpenCV v4.5 一起使用。
打开终端并初始化新的 React-Native 项目
npx react-native init NAME_OF_YOUR_PROJECT
导航到路径 /main
cd NAME_OF_YOUR_PROJECT/android/app/src/main
创建名为 jniLibs 的新文件夹
mkdir jniLibs
从https://opencv.org/releases/ 下载并提取最新的适用于 Android 的 OpenCV（使用 OpenCV 4.5 测试）
将解压文件夹（OpenCV-android-sdk）中的“sdk”文件夹重命名为“opencv”
将提取的文件夹（OpenCV-android-sdk/opencv/native/libs/）中的内容复制到新创建的./jniLibs
cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs
打开 Android Studio 并打开项目目录的 Android 文件夹
文件 -> 打开 -> 选择 */NAME_OF_YOUR_PROJECT/android
将 OpenCV 导入您的项目
文件->新建->导入模块->选择你重命名为opencv的文件夹
（重要！一些教程说要选择此文件夹中的“java”文件夹 - 不要那样做）
在 Gradle 脚本下：打开 build.gradle(:opencv) 和 build.gradle(YOUR_PROJECT_NAME) 将两者都更改为匹配的数字 - 在我的情况下：
minSdkVersion = 21
compileSdkVersion = 29
将 opencv 添加到项目依赖项
文件->项目结构->依赖项->选择应用程序并按“+”号（位于“所有依赖项下方”）->选中opencv旁边的复选框->按OK
在 build.gradle(YOUR_APP_NAME) 中将 gradle 版本更改为 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 添加缺少的维度策略。应该看起来像这样：
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 ，那么还要添加缺失维度策略。应该是这样的
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) 中的相同。应该看起来像这样
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
将以下用户权限添加到您的 /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 的版本号
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
转到 /YOUR_PROJECT_PATH/android/app/src/main/java/com/ 并创建 reactlibrary 文件夹，然后在该文件夹中创建两个文件：
RNOpenCvLibraryModule.java
RNOpenCvLibraryPackage.java
使用与此 GIT 存储库 https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary 中相同的内容填充它们
打开 MainApplication.java 并添加这个“packages.add(new RNOpenCvLibraryPackage());”到 getPackage() 方法。应该看起来像这样：
@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() 方法中：
@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”的开头添加正确的导入
import org.opencv.android.OpenCVLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
同步您的项目
文件 -> 使用 Gradle 文件同步您的项目
打开终端并导航到您的项目。添加这个包
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://git@github.com/react-native-community/react-native-camera.git
（确保 react-native-camera 是从 GIT repo 安装的，否则会遇到错误）
在您的 PROJECT_PATH 中创建名为“src”的新文件夹并复制此 repos 的内容（“https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src”）“src”文件夹到你的 (/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 中）
启动 react-native
npx react-native start
在安卓设备上运行
npx react-native run-android
【讨论】：
你可以使用这个库 react-native-opencv3 或者你可以利用这个project 在 react-native 中为 OpenCV 使用原生 Java 和 Objective-C 绑定
【讨论】：
如果有人仍然想知道这里的解决方案。设置它是相当多的工作。您必须用 Java 编写 OpenCV 代码。 https://stackoverflow.com/a/63116300/10333905
【讨论】：