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

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

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:

include ':react-native-image-picker'
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:

dependencies {
compile project(':react-native-image-picker')
}

  

3.Add the required permissions in AndroidManifest.xml:

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

  

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

import com.imagepicker.ImagePickerPackage;

.........

 new ImagePickerPackage()

 

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

用法:

配置弹出框信息

import  ImagePicker from 'react-native-image-picker'; //第三方相机
var photoOptions = {
//底部弹出框选项
title:'请选择',
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'选择相册',
quality:0.75,
allowsEditing:true,
noData:false,
storageOptions: {
skipBackup: true,
path:'images'
}
}
 

点击事件

cameraAction = () =>{
ImagePicker.showImagePicker(photoOptions,(response) =>{
console.log('response'+response);
if (response.didCancel){
return
}
})
}

  

案例:

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. Java—多线程编程

    一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 进程:一个进程包括由操作系统分配的内存空间,包含一个或多个线程.一个线程不能独立的存 ...

  2. jQuery查找——parent/parents/parentsUntil/closest

    jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集 ...

  3. Nehe Opengl

    http://nehe.gamedev.net/tutorial/lessons_01__05/22004/ Nehe Opengl,据说从基础到高端进阶都是很好的教程,准备学习这个序列,顺便记录下随 ...

  4. Android Token的使用学习

    学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...

  5. 最强密码 (百度之星复赛 T5)

    题目大意: 给出一个字符串A,要求最短的字符串B,B不是A的子序列. 求最短长度 和 最短的字符串个数    |A|<=105. 题解: 1.比赛的时候没有想出来,时隔一个多月又看到了这道题,虽 ...

  6. mysql sql 分页

    mysql SELECT * FROM TT LIMIT 1,20 少量 数据 大量数据(百万级) select * from news where id>=(select id from ne ...

  7. serialize和unserialize函数

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性.1. serialize和u ...

  8. 如何解决前端传来的时间格式与mysql表中时间格式不匹配的查询问题

    前端传过来的时间格式为“2016-07-11 11:13:10”,而数据表中对应字段`add_time`的格式为“2016-7-11”,此时sql不能直接用 "where `add_time ...

  9. POJ 1061

    题意: 两只青蛙在同一条纬度上,它们各自朝西跳,问它们要跳多少步才能碰面(必须同时到达同一点). 分析: 假设它们跳了t步才相遇,青蛙a初始坐标为x,青蛙b初始坐标为y,则跳了t步相遇后a的坐标为 x ...

  10. dll学习

    Dll:动态链接库 动态链接库(dll)是包含共享函数库的二进制文件,可以被多个应用程序同时使用.建立应用程序的可执行文件时,不必将DLL连接到应用程序中,而是在运行时动态装载DLL,装载时DLL被映 ...