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. JVM学习(八)指令重排序

    一.数据依赖性 在学习JVM的指令重排序之前,我们先了解一下什么是数据依赖性: 编译器和处理器在处理具体的指令时,可能会对操作进行重排序来提高执行性能[多条指令并行执行,所以提升性能的同时也可能会导致 ...

  2. dubbo学习(一)认识dubbo

    一.发展背景 单一应用架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的数据访问框架(ORM)是关键. 垂直应用架构 当访问量逐渐增大, ...

  3. 普转提Day2

    T1 给定一个区间,求这个区间中只有一个数字与其他数组不相同的数的个数. 给出的区间范围较大,但是要求的数比较少.所以我的想法是这样的:因为这些数只有一个数字和每个数字都相同的数不同,所以考虑将所有数 ...

  4. pip安装更换镜像源

    说明 有时候网不好,pip安装非常慢,所以需要更换源,特记录如下   国内镜像地址: # 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple # 豆瓣 http ...

  5. 为cmd中的命令添加别名,以解决java:错误: 编码 GBK 的不可映射字符 (0xAF)

    使用sublineText3编写了java代码,通过cmd javac编译 提示 错误:编码GBK的不可映射字符 解决方法 使用javac -encoding UTF-8 Person.java 结果 ...

  6. 剑指Offer(一):二维数组中的查找

    一.前言 刷题平台:牛客网 二.题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...

  7. C++实现串口通信问题(与Arduino)

    参考1(已验证稍加修改可与Arduino通信):https://blog.csdn.net/qq_36106219/article/details/81701368 参考2(比较全,main函数需要自 ...

  8. CDH5部署三部曲之一:准备工作

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. 极简 Node.js 入门 - 4.5 双工流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  10. shell-的bash内部命令变量介绍与shift等

    一:shell的bash内部命令变量介绍与shift等 1. bash内部变量     有些内部命令在目录列表时是看不见的,他们有shell本身提供,常用的内部命令有:echo,eval,exec,e ...