最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke.

该插件可以同时给iOS和Android两个平台下使用,但是需要配置下各自平台下的文件,github上有详细的文字说明,但是本人对于文字向来无感,所以特地图解记录下配置说明和用法.

1.   首先,安装下该插件:

  1. npm install react-native-image-picker@latest --save

2.   先别link,先添加进来该库之后 再link.

下面对于各自平台进行配置即可.

iOS:

  1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
  2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

 =>  打开Xcode打开项目,点击根目录,右键选择 Add Files to 'XXX',选中项目中的该路径下的文件即可:node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

OK,添加进来之后,再进行 link命令.  react-native link react-native-image-picker

3.Add RNImagePicker.a to Build Phases -> Link Binary With Libraries

 

4.For iOS 10+, Add the NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys to your Info.plist with strings describing why your app needs these permissions

=>对于适配iOS10,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription

iOS平台配置完毕.

Android:

1.Add the following lines to android/settings.gradle:

  1. include ':react-native-image-picker'
  2. project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

2.Add the compile line to the dependencies in android/app/build.gradle:

  1. dependencies {
  2. compile project(':react-native-image-picker')
  3. }

  

3.Add the required permissions in AndroidManifest.xml:

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

  

4.Add the import and link the package in MainApplication.java:

  1. import com.imagepicker.ImagePickerPackage;
  2.  
  3. .........
  4.  
  5. new ImagePickerPackage()

 

OK,安卓这边也配置完毕.

用法:

配置弹出框信息

  1. import ImagePicker from 'react-native-image-picker'; //第三方相机
  2. var photoOptions = {
  3. //底部弹出框选项
  4. title:'请选择',
  5. cancelButtonTitle:'取消',
  6. takePhotoButtonTitle:'拍照',
  7. chooseFromLibraryButtonTitle:'选择相册',
  8. quality:0.75,
  9. allowsEditing:true,
  10. noData:false,
  11. storageOptions: {
  12. skipBackup: true,
  13. path:'images'
  14. }
  15. }
 

点击事件

  1. cameraAction = () =>{
  2. ImagePicker.showImagePicker(photoOptions,(response) =>{
  3. console.log('response'+response);
  4. if (response.didCancel){
  5. return
  6. }
  7. })
  8. }

  

案例:

demo地址:https://github.com/pheromone/mycamera

  

react native 之 react-native-image-picke的详细使用图解的更多相关文章

  1. Native VS React Native VS 微信小程序

    随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...

  2. React Native:使用 JavaScript 构建原生应用 详细剖析

    数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...

  3. React Native & react-native-web-player & React Native for Web

    React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...

  4. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  5. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  7. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  8. WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?

    Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...

  9. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  10. React源码 React.Component

    React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...

随机推荐

  1. 并发编程 01—— ThreadLocal

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...

  2. js多行省略

    $(function (){ // var $introduce = $(".c-introduce").html(); // $new_introduce = $introduc ...

  3. Java—数组

    1 声明数组变量   dataType[] arrayRefVar; 2 实例数组         double[] myArray; 3 创建数组         arrayRefVar =new ...

  4. Python【2】-列表和元组

    一.序列 python包含六种内建的序列:列表.元组.字符串.unicode字符串.buffer对象.xrange对象. 列表可以修改,元组是不能修改的. 二.列表 列表list是变长序列,其中的内容 ...

  5. text-justify实操

    转自:http://www.zhangxinxu.com/wordpress/?p=1514 CSS代码: .video-list{width:540px; margin-left:auto; mar ...

  6. ionic单页面应用中微信分享的问题总结

    首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...

  7. scala 打印一个乘法口诀表 (<<scala 编程>> P87)

    (for(i <- 1 to 9;j <- 1 to i; s = s"$j*$i=${i*j}\t") yield {if(j==1) s"$s\n&quo ...

  8. [划分树] POJ 2104 K-th Number

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 51732   Accepted: 17722 Ca ...

  9. SpringMVC 文件上传&拦截器&异常处理

    文件上传 Spring MVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.Spring 用 Jakarta Commons FileUpload ...

  10. 课程笔记:——javascript中的预解释2

    in:检测某一个属性是否属于这个对象(既可以检测私有的属性,也可以检测公有的属性) --> attr in obj 1.不管条件是否成立,在预解释的时候,判断体中的带var和function的都 ...