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. 关于JAVA的垃圾回收机制

    使用JAVA编程时,几乎不需要考虑"内存泄漏"的问题,这也是JAVA相较于C++的一个优点. 最近在看<Java编程思想>(第四版,听说第五版有点牛逼....),里面讲 ...

  2. Java程序员面试学习资料汇总

    整理了一些关于Java程序员面试的书籍及免费资料. 一.书籍篇1)<Offer来了:Java面试核心知识点精讲(原理篇)>精讲Java面试必需的JVM原理.Java基础.并发编程.数据结构 ...

  3. JAVA并发笔记

    重入锁的特性, 避免死锁, 如果有锁的话, 不用重新加锁, 直接增加锁的次数.. Synchronize, ReentrantLock都是重入锁. 读写锁, ReentrantReadWriteLoc ...

  4. 智能卡加密芯片SMEC90ST

    深圳市中巨伟业信息科技有限公司 最新推出一款单价低,安全性高的智能卡安全芯片,产品型号为:SMEC90ST,采用32-bit ARM SC100 SecureCore Processor 安全内核处理 ...

  5. Python-设置文件缓冲类型

    案例: 将文件内容写入到硬件设备时候,使用系统调用,这类IO操作时间长,为了减小IO操作,通常会使用缓冲区(有足够多数据才能调用). 文件缓冲行为分为:全缓冲,行缓冲,无缓冲 如何解决? open(' ...

  6. 【代码审计】JAVA代码审计

    分享一些Java安全相关文章,其中大部分都涉及到代码的分析与审计. 大家总是在找Java的代码审计的文章,但好像很多人选择性失明. 其实Java没有和PHP一样的简单,所以你觉得你看到的文章不是入门级 ...

  7. 使用docker搭建redis服务器记录

    #mkdir /home/redishome#mkdir /home/redishome/data#chmod -R 777 /home/redishome把redis.conf传到/home/red ...

  8. 原生JS实现下拉列表

    1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...

  9. java中的t怎么用

    <T> T表示返回值是一个泛型,传递啥,就返回啥类型的数据,而单独的T就是表示限制你传递的参数类型,这个案例中,通过一个泛型的返回方式,获取每一个集合中的第一个数据, 通过返回值<T ...

  10. 基于python常用排序与查找

    """ 排序与查找 -- 冒泡排序 -- 选择排序 -- 快速排序 --****经典 -- 希尔排序 """ # 常用排序的实现 # 冒泡排 ...