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 不是很友好.