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

Question

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

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

提前致谢。

Answer 1

我已经在 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 一起使用。

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

   npx react-native init NAME_OF_YOUR_PROJECT
   

2. 导航到路径 /main

   cd NAME_OF_YOUR_PROJECT/android/app/src/main
   

3. 创建名为 jniLibs 的新文件夹

   mkdir jniLibs
   

4. 从https://opencv.org/releases/下载并提取最新的 OpenCV for Android（使用 OpenCV 4.5 测试）

5. 将解压后的文件夹（OpenCV-android-sdk）中的“sdk”文件夹重命名为“opencv”

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

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

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

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

8. 将 OpenCV 导入您的项目

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

   （重要！一些教程说要选择此文件夹中的“java”文件夹 - 不要这样做）

9. 在 Gradle 脚本下：打开 build.gradle(:opencv) 和 build.gradle(YOUR_PROJECT_NAME) 将两者都更改为匹配的数字 - 在我的情况下：

   minSdkVersion = 21
   
   compileSdkVersion = 29
   

10. 将 opencv 添加到项目依赖项

    文件 -> 项目结构 -> 依赖项 -> 选择应用程序并按“+”号（位于“所有依赖项下方”） -> 选中 opencv 旁边的复选框 -> 按确定

11. 在 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
    }
    

12. 现在打开 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'
       }
    

13. 打开 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
    }
    

14. 将以下用户权限添加到您的 /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" />
    

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

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

16. 转到 /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上相同的内容填充它们

17. 打开 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;
    

18. 同步您的项目

    文件 -> 使用 Gradle 文件同步您的项目

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

    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 
    

    （确保从 GIT repo 安装 react-native-camera 否则你会遇到错误）

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

    mkdir src
    

21. 复制此 repos “https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js” App.js 文件的内容并替换 App.js 文件中的内容（位于你的_项目_路径）

22. 开始反应原生

    npx react-native start
    

23. 在 Android 设备上运行

    npx react-native run-android