1. 程式人生 > >react native 增加react-native-camera

react native 增加react-native-camera

err main 地址 技術 iss body lin yarn services

前提:已經正常運行的項目

技術分享圖片

第一步:使用命令加入react-native-camera,並且關聯react-native-camera,

yarn add react-native-camera
react-native link react-native-camera

運行了命令react-native link react-native-camera後,會修改兩個文件,

1.android/app/src/main/java/[...]/MainApplication.java,增加了以下內容

import org.reactnative.camera.RNCameraPackage;

修改了以下內容,紅字部門是新增內容

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNCameraPackage()
      );
    }

2.android/settings.gradle,增加了以下內容

include :react-native-camera
project(:react-native-camera
).projectDir = new File(rootProject.projectDir, ../node_modules/react-native-camera/android)

技術分享圖片

第二步:在react-native link react-native-camera的基礎上進一步更改項目文件

1.修改android/app/build.gradle,修改了以下內容,紅字部分是新增的內容

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1
" compile "com.facebook.react:react-native:+" // From node_modules compile (project(‘:react-native-camera‘)) { exclude group: "com.google.android.gms" } compile ("com.google.android.gms:play-services-vision:10.2.0") { force = true; } }

2.修改...\android\app\src\main\AndroidManifest.xml,增加攝像頭處理權限

<uses-permission android:name="android.permission.CAMERA" />

技術分享圖片

第三步:嘗試編譯項目,可惜的是編譯出錯了

技術分享圖片

查看錯誤,解決地址:https://github.com/react-native-community/react-native-camera/issues/1252

技術分享圖片

修改錯誤

技術分享圖片

修改成以下內容

技術分享圖片

重新編譯一次,發現已經成功編譯成功了

技術分享圖片

第四步:增加一個react-native頁面,打開攝像頭

代碼參考地址:http://www.hangge.com/blog/cache/detail_1618.html



另外也比較支持使用react-native-image-picker庫選擇圖片,這樣可以先準備好照片,然後上傳至系統

參考地址:http://www.hangge.com/blog/cache/detail_1617.html

react native 增加react-native-camera