码迷,mamicode.com
首页 > 其他好文 > 详细

react native 增加react-native-camera

时间:2018-03-19 13:23:02      阅读:766      评论:0      收藏:0      [点我收藏+]

标签:mpi   http   重新编译   body   one   处理   book   权限   set   

前提:已经正常运行的项目

技术分享图片

 

 

第一步:使用命令加入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

标签:mpi   http   重新编译   body   one   处理   book   权限   set   

原文地址:https://www.cnblogs.com/weschen/p/8566708.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!