最近需要在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. Linux 设备驱动程序 proc seq

    不能再简化 #include<linux/module.h> #include<linux/init.h> #include<linux/seq_file.h> # ...

  2. 【图像处理】【SEED-VPM】6.文件目录结构

    ———————————————————————————————————————————————————————————————————————— seed-vpm6467 \ Hardware Tes ...

  3. codevs 钢丝塔的庆生

    #include <cstdio> #include <cmath> const int MOD = 9999991; int table[MOD + 1]; void cre ...

  4. 20140701立项 移植WatermarkLabelSys

    开始移植WatermarkLabelSys,从一个版本中抽离出最原始的内核,不求完善,只求能运行.时间半个月. 顺利的话针对不同的后缀.进程开始添加规则细节,时间1个月. 在顺利的话,兼容性测试,完善 ...

  5. [CodeForces - 712D]Memory and Scores (DP 或者 生成函数)

    题目大意: 两个人玩取数游戏,第一个人分数一开始是a,第二个分数一开始是b,接下来t轮,每轮两人都选择一个[-k,k]范围内的整数,加到自己的分数里,求有多少种情况使得t轮结束后a的分数比b高.  ( ...

  6. Raspberry Pi UART with PySerial

    参考:http://programmingadvent.blogspot.hk/2012/12/raspberry-pi-uart-with-pyserial.html Raspberry Pi UA ...

  7. C++ 类模板的使用

    从事C++挺久了,在前段时看书时,发现高手,都是在写模板无,泛型编程,顿感差距.自己连模板都没有写,于是就小小的研究了下模板的用法. 模板简而言之就是对某此对象的相同方法,或处理方式,进行归纳,总结, ...

  8. Unbalanced calls to begin/end appearance transitions for **

    在自定义UITabBarController中点击视图跳转的时候,有可能就出现这个问题, 解决方法就是在自定义的UITabBarController中的视图显示消失通知方法中添加如下方法: - (vo ...

  9. Linux下man安装及使用方法

    常用法: man [section] name 其中: section 指的是手册页的哪个部分,可以是1.2.3…8.,若不指定,man会按照次序依次查找,知道找到第一个. name 指的是某个命令. ...

  10. 不是SELECTed表达式

    sql语句如下: select distinct(p.project_name) name,p.pkid pkid, p.report_year year, q.cor_name cor_name,g ...