react-native-camera 遇坑笔记

在 react-native(android 端)使用react-native-camera

参考文档

  1. 官方文档
  2. react native 增加 react-native-camera
  3. bug1: Could not find method google()
    解决方案
  4. bug2: Could not find method compileOnly()
    解决方案

环境说明

  • 系统: ubuntu
  • Andriod Studio: 3.4
  • jdk: 1.8
  • sdk: 26.0.1
  • react-native: 0.55.4
  • react-native-camera: 1.2.0

1.安装依赖包

yarn add react-native-camera

2.关联

react-native link react-native-camera

关联之后,会自动修改以下 3 个文件:

// android/app/src/main/java/[...]/MainApplication.java

+   import org.reactnative.camera.RNCameraPackage
+   new RNCameraPackage()
// android/settings.gradle

+   include ':react-native-camera'
+   project(':react-native-camera').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-camera/android')
// android/app/build.gradle

+   compile (project(':react-native-camera'))

3.进一步修改 grable 文件

// android/app/build.gradle

-   compile (project(':react-native-camera'))

+   compile (project(':react-native-camera')) {
+       exclude group: "com.google.android.gms"
+       compile 'com.android.support:exifinterface:25.+'
+       compile ('com.google.android.gms:play-services-vision:12.0.1') {
+           force = true
+       }
+   }

4.为项目添加访问摄像头的权限

// android/app/src/main/AndroidManifest.xml

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

5.解决 bug1

编译之后,会报一个错误:

Could not find method google() for arguments [] on repository container.

解决方案请查看这个链接.

修改的文件有 3 个,具体内容安装说明文档里面的一个个修改即可.

有几个关键的地方:

// android/build.gradle

+   classpath 'com.android.tools.build:gradle:3.1.0'
// android/app/build.gradle

+   compileSdkVersion 26
+   buildToolsVersion "26.0.1"

6.解决 bug2

配置之后还会有一个 bug:

Could not find method compileOnly()

这个似乎是 grable 的版本问题.

修改 grable 版本:

// android/gradle/grade-wrapper.properties

-    distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+    distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

7.demo

demo 直接看官方的 demo就好.

结尾

以上就是我遇到的坑,可能还有其他的 bug,去iss找找应该可以找到.
反正 react-native 对 android 不是很友好.

    原文作者:darcrand
    原文地址: https://segmentfault.com/a/1190000016510291
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞