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 给我们提供了各种各样的功能.他帮助我们去 ...
随机推荐
- Linux 设备驱动程序 proc seq
不能再简化 #include<linux/module.h> #include<linux/init.h> #include<linux/seq_file.h> # ...
- 【图像处理】【SEED-VPM】6.文件目录结构
———————————————————————————————————————————————————————————————————————— seed-vpm6467 \ Hardware Tes ...
- codevs 钢丝塔的庆生
#include <cstdio> #include <cmath> const int MOD = 9999991; int table[MOD + 1]; void cre ...
- 20140701立项 移植WatermarkLabelSys
开始移植WatermarkLabelSys,从一个版本中抽离出最原始的内核,不求完善,只求能运行.时间半个月. 顺利的话针对不同的后缀.进程开始添加规则细节,时间1个月. 在顺利的话,兼容性测试,完善 ...
- [CodeForces - 712D]Memory and Scores (DP 或者 生成函数)
题目大意: 两个人玩取数游戏,第一个人分数一开始是a,第二个分数一开始是b,接下来t轮,每轮两人都选择一个[-k,k]范围内的整数,加到自己的分数里,求有多少种情况使得t轮结束后a的分数比b高. ( ...
- Raspberry Pi UART with PySerial
参考:http://programmingadvent.blogspot.hk/2012/12/raspberry-pi-uart-with-pyserial.html Raspberry Pi UA ...
- C++ 类模板的使用
从事C++挺久了,在前段时看书时,发现高手,都是在写模板无,泛型编程,顿感差距.自己连模板都没有写,于是就小小的研究了下模板的用法. 模板简而言之就是对某此对象的相同方法,或处理方式,进行归纳,总结, ...
- Unbalanced calls to begin/end appearance transitions for **
在自定义UITabBarController中点击视图跳转的时候,有可能就出现这个问题, 解决方法就是在自定义的UITabBarController中的视图显示消失通知方法中添加如下方法: - (vo ...
- Linux下man安装及使用方法
常用法: man [section] name 其中: section 指的是手册页的哪个部分,可以是1.2.3…8.,若不指定,man会按照次序依次查找,知道找到第一个. name 指的是某个命令. ...
- 不是SELECTed表达式
sql语句如下: select distinct(p.project_name) name,p.pkid pkid, p.report_year year, q.cor_name cor_name,g ...