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