react native 之 react-native-image-picke的详细使用图解
最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke.
该插件可以同时给iOS和Android两个平台下使用,但是需要配置下各自平台下的文件,github上有详细的文字说明,但是本人对于文字向来无感,所以特地图解记录下配置说明和用法.
1. 首先,安装下该插件:
- npm install react-native-image-picker@latest --save
2. 先别link,先添加进来该库之后 再link.
下面对于各自平台进行配置即可.
iOS:
- In the XCode's "Project navigator", right click on your project's Libraries folder ➜
Add Files to <...>
- Go to
node_modules
➜react-native-image-picker
➜ios
➜ selectRNImagePicker.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的详细使用图解的更多相关文章
- Native VS React Native VS 微信小程序
随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...
- React Native:使用 JavaScript 构建原生应用 详细剖析
数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...
- 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 ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- 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 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- React源码 React.Component
React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...
随机推荐
- 并发编程 01—— ThreadLocal
Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...
- js多行省略
$(function (){ // var $introduce = $(".c-introduce").html(); // $new_introduce = $introduc ...
- Java—数组
1 声明数组变量 dataType[] arrayRefVar; 2 实例数组 double[] myArray; 3 创建数组 arrayRefVar =new ...
- Python【2】-列表和元组
一.序列 python包含六种内建的序列:列表.元组.字符串.unicode字符串.buffer对象.xrange对象. 列表可以修改,元组是不能修改的. 二.列表 列表list是变长序列,其中的内容 ...
- text-justify实操
转自:http://www.zhangxinxu.com/wordpress/?p=1514 CSS代码: .video-list{width:540px; margin-left:auto; mar ...
- ionic单页面应用中微信分享的问题总结
首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...
- 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 ...
- [划分树] POJ 2104 K-th Number
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 51732 Accepted: 17722 Ca ...
- SpringMVC 文件上传&拦截器&异常处理
文件上传 Spring MVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.Spring 用 Jakarta Commons FileUpload ...
- 课程笔记:——javascript中的预解释2
in:检测某一个属性是否属于这个对象(既可以检测私有的属性,也可以检测公有的属性) --> attr in obj 1.不管条件是否成立,在预解释的时候,判断体中的带var和function的都 ...