react-native 实现扫描二维码或拍照上传（react-native-camera）

react-native 实现拍照上传及扫描二维码功能

自从入了rn项目的坑，开始了踩坑历程，下面总结一下拍照上传遇见的坑：
使用的主要插件是：react-native-camera 和 react-native-image-picker

“react-native”: “0.59.9”
“react-native-camera”: “git+https://[email protected]/react-native-community/react-native-camera”
“react-native-image-picker”: “^2.3.1”

安装 react-native-camera

1. 安装步骤这里省略，按照 npm 安装步骤没什么问题：npm安装步骤
   P.S. 我这里的rn版本 < 0.60.x, 所以安装完成之后需要 react-native link 一下
2. 但是安装完成之后会遇见各种报错问题，下面汇总一下安装出现的问题及解决方式

安装报错问题汇总处理

异常 1

 What went wrong:
 Could not determine the dependencies of task ':app:preDebugBuild'.

 > Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
 > Could not resolve project :react-native-camera.

      Required by:
          project :app
       > Cannot choose between the following variants of project :react-native-camera:
           - generalDebugRuntimeElements
           - mlkitDebugRuntimeElements
         All of them match the consumer attributes:
           - Variant 'generalDebugRuntimeElements' capability baidupush:react-native-camera:unspecified:
               - Unmatched attributes:
                   - Found com.android.build.api.attributes.VariantAttr 'generalDebug' but wasn't required.
                   - Found react-native-camera 'general' but wasn't required.
               - Compatible attributes:
                   - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
                   - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
                   - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
           - Variant 'mlkitDebugRuntimeElements' capability baidupush:react-native-camera:unspecified:
               - Unmatched attributes:
                   - Found com.android.build.api.attributes.VariantAttr 'mlkitDebug' but wasn't required.
                   - Found react-native-camera 'mlkit' but wasn't required.
               - Compatible attributes:
                   - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
                   - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
                   - Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.

解决方式

在 android/app/build.gradle 文件 defaultConfig 配置中添加 missingDimensionStrategy 'react-native-camera', 'general'，然后再编译。
完成代码如下

defaultConfig {
  applicationId "com.todayfood"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
  versionCode 1
  versionName "1.0"
  missingDimensionStrategy 'react-native-camera', 'general'
}

异常 2

Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
    is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
    Suggestion: add 'tools:replace="android:appComponentFactory"' to  element at AndroidManifest.xml:15:2-101:16 to override.
或
Error:
    tools:replace specified at line:14 for attribute android:appComponentFactory, but no new value specified
E:\Android\Job\TestDemoProject\github\BaseApplication\BaseApplication\app\src\main\AndroidManifest.xml Error:
    Validation failed, exiting

解决方式

在文件 android/app/src/AndroidManifest.xml 的标签 中添加 xmlns:tools="http://schemas.android.com/tools"；标签里添加内容：tools:replace="android:appComponentFactory" 和 android:appComponentFactory="任意字符"；

异常3

(androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.app.INotificationSideChannel$Stub found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.app.INotificationSideChannel$Stub$Proxy found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.graphics.drawable.IconCompatParcelizer found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.IResultReceiver found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.IResultReceiver$Stub found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.IResultReceiver$Stub$Proxy found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.ResultReceiver found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.ResultReceiver$1 found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)
Duplicate class android.support.v4.os.ResultReceiver$MyResultReceiver found in modules classes.jar (androidx.core:core:1.0.1) and classes.jar (com.android.support:support-compat:28.0.0)

解决方式

  # 需要在gradle.properties中添加下面两行代码
  # 这是因为混合支持库。通过添加这些行选择androidX作为您的支持库
  android.useAndroidX=true
  android.enableJetifier=true

安装react-native-image-picker

安装方式：按照 npm 安装步骤进行。

文件配置

android

android/app/src/main/AndroidManifest.xml文件中添加相机权限：

在MainApplication.Java文件中添加如下代码：

import com.imagepicker.ImagePickerPackage;
new ImagePickerPackage()

其他配置已在安装过程中加入

ios

只需要在info.plist文件中引入以下配置就好：

以上都是实际跑过的，可以实现，对于实现code，初学者可以参考下面大佬的文～

参考文章：https://www.jianshu.com/p/727c9d4c080c