1, 首先,安装下该插件。

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

2,自动安装(做了这一步 下面安装的平台设置大部分都自动添加好了)

react-native link

3, 针对Android和iOS平台分别进行配置

## android 平台配置

a,在android/settings.gradle文件中添加如下代码:    

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

b,在android/app/build.gradle文件的dependencies中添加如下代码:

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
    }
    ...
}
...

c,Update the gradle version to 2.14.1 in android/gradle/wrapper/gradle-wrapper.properties:

...
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

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

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

e,在AndroidManifest.xml文件中添加权限:

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

f,最后在MainApplication.Java文件中添加如下代码:

import com.imagepicker.ImagePickerPackage;
...
new ImagePickerPackage()

Android环境就配置完成。

##iOS平台配置

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

2,添加成功后使用link命令:react-native link react-native-image-picker 。 
3,打开项目依次使用Build Phases -> Link Binary With Libraries将RNImagePicker.a添加到项目依赖。 

4,对于iOS 10+设备,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription。 

4. 参数

option iOS Android 描述
title OK OK 标题
cancelButtonTitle OK OK 取消按钮
takePhotoButtonTitle OK OK 拍照按钮
chooseFromLibraryButtonTitle OK OK 从图库选择照片
customButtons OK OK 自定义按钮
cameraType OK - 类型 'front' or 'back'
mediaType OK OK 图片或视频 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android
maxWidth OK OK 最长宽 Photos only
maxHeight OK OK 最长高 Photos only
quality OK OK 图片质量 0 to 1, photos only
videoQuality OK OK 视频质量 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android
durationLimit OK OK 最大视频录制时间,以秒为单位
rotation - OK Photos only, 0 to 360 旋转角度
allowsEditing OK - bool 是否可以编辑
noData OK OK 如果为true,则禁用data生成的base64 字段(极大地提高大图片的性能)
storageOptions OK OK 如果提供此密钥,该图像将被保存在DocumentsiOS 应用程序的目录中,或者保存在PicturesAndroid上的应用程序目录(而不是临时目录)
storageOptions.skipBackup OK - 如果true,该照片将不会备份到iCloud
storageOptions.path OK - 如果设置,将保存图像Documents/[path]/而不是根目录Documents
storageOptions.cameraRoll OK OK 如果为true,裁剪的照片将保存到iOS相机胶卷或Android DCIM文件夹。
storageOptions.waitUntilSaved OK - 如果为true,则会延迟回复回复,直到照片/视频保存到相机胶卷后。如果刚刚拍摄了照片或视频,则只有在该AND cameraRoll均为真时,才会在响应对象中提供文件名和时间戳字段。
permissionDenied.title - OK 解释权限对话框的标题。默认情况下Permission denied。
permissionDenied.text - OK 解释权限对话框的消息。默认情况下To be able to take pictures with your camera and choose images from your library.。
permissionDenied.reTryTitle - OK 重试按钮的标题。默认re-try
permissionDenied.okTitle - OK 确定按钮的标题。默认I'm sure

响应对象

key iOS Android 描述
didCancel OK OK 点击了取消
error OK OK 出现错误信息
customButton OK OK 点击了自定义按钮
data OK OK base64编码的图像数据(仅限照片)
uri OK OK 设备上的本地文件资源(照片或视频)
origURL OK - 照片库中原始资源的网址(如果存在)
isVertical OK OK 如果图像是垂直定向的,则会是真实的
width OK OK 图像宽(仅限照片)
height OK OK 图像高度(仅限照片)
fileSize OK OK 文件大小(仅限照片)
type - OK 文件类型(仅限照片)
fileName OK (photos and videos) OK (photos) 文件名称
path - OK 文件路径

react-native-image-picker用法的更多相关文章

  1. React native 中 SectionList用法

    一.代码 import React, { Component } from 'react'; import { AppRegistry, View, Text, SectionList, } from ...

  2. React Native ref高级用法&&setNativeProps使用

    ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...

  3. [书籍精读]《React Native精解与实战》精读笔记分享

    写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...

  4. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  5. 你不可不知的 React Native 混合用法(Android 篇)

    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...

  6. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

  7. React Native props & state

    今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下 ...

  8. react native AsyncStorage的使用

    如果现在有一个需求,是要把用户的账号密码保存到本地,大家会怎么做的呢?如果在android中,我相信一大部分人会想到SharedPreferences,这是一个以键值对的形式进行存储的.那如果在rea ...

  9. react native 之 react-native-image-picke的详细使用图解

    最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke. 该插件可以同时给iOS和Android两个平台下使 ...

  10. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

随机推荐

  1. Spring学习(七)bean装配详解之 【通过注解装配 Bean】【自动装配的歧义解决】

    自动装配 1.歧义性 我们知道用@Autowired可以对bean进行注入(按照type注入),但如果有两个相同类型的bean在IOC容器中注册了,要怎么去区分对哪一个Bean进行注入呢? 如下情况, ...

  2. Linux环境下C++调试的三板斧

    调试解决程序的漏洞,是程序员最基本的技能之一.用惯了图形化IDE,在目前使用gtest框架进行单元测试,需要通过xshell远程连接Linux虚拟机进行C++代码的调试时,觉得很不适应.经过几天查资料 ...

  3. 什么是 Opcache,如何使用 Opcache

    Opcode 是啥? 我们先看一下 PHP 的执行过程: PHP 初始化执行环节,启动 Zend 引擎,加载注册的扩展模块. 初始化后读取 PHP 脚本文件,Zend 引擎对 PHP 文件进行词法分析 ...

  4. NMAP类型题目 (escapeshellarg,escapeshellcmd使用不当)

    [BUUCTF 2018]Online Tool 给出了源码 审计 <?php if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $_SERVER[' ...

  5. Git源代码管理笔记

    很早之前也学过git但是没有详细的记录,这次是做个复习,巩固 若有不对的地方请您指出 目录 Git和SVN有什么区别? 什么是Git? github仓库 Star和Fork Pull request ...

  6. LinkedList,ArrayList,HashMap,TreeMap

    hashMap是无序的,TreeMap是有序的(hashmap是一个链表,而treemap实现了sortedmap()接口所以有序,其实现同时实现比较器) hashSet的底层是根据HashMap来存 ...

  7. (转载)Tomcat 7集群浅析

    本文转载自:http://blog.csdn.net/wangyangzhizhou. 如有侵权,请联系处理!   简介 每个节点都要维护一份集群节点信息列表,集群组通知的默认实现是在使用 UDP 数 ...

  8. Linux系统编程 —时序竞态

    时序竞态 什么是时序竞态?将同一个程序执行两次,正常情况下,前后两次执行得到的结果应该是一样的.但由于系统资源竞争的原因,前后两次执行的结果有可能得到不一样的结果,这个现象就是时序竞态. pause函 ...

  9. matlab中imread 从图形文件读取图像

    来源:https://ww2.mathworks.cn/help/matlab/ref/imread.html?searchHighlight=imread&s_tid=doc_srchtit ...

  10. Java 使用UDP传输一个小文本文件

    工具1:Eclipse 工具2:IntelliJ IDEA Java工程的目录结构(基于IntelliJ IDEA) 例1.1:接收方,因为接收到的数据是字节流,为了方便,这里是基于Apache co ...