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. TKE 集群组建最佳实践

    Kubernetes 版本 Kubernetes 版本迭代比较快,新版本通常包含许多 bug 修复和新功能,旧版本逐渐淘汰,建议创建集群时选择当前 TKE 支持的最新版本,后续出新版本后也是可以支持 ...

  2. day56:django:csrf_token&文件上传

    目录 1.csrf介绍 2.django实现csrf_token认证 3.django实现文件上传 csrf介绍 什么是csrf? csrf:跨站请求伪造.攻击者通过HTTP请求将数据传送到服务器,从 ...

  3. Redis中的订阅模式

    redis中的客户端可以订阅一个自定义的频道,接受来自该频道的消息 订阅 订阅指定频道-SUBSCRIBE SUBSCRIBE channel [channel2]... SUBSCRIBE 频道名 ...

  4. brew清华镜像

    https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

  5. ser 序列化的使用

    2.序列化(serializers.Serializer) 1)序列化(正向查找) from rest_framework import serializers from users.models i ...

  6. Book of Shaders 01 - 关于函数造型能力的理解

    0x00 从函数出发 Shader 中的很多效果都是由函数计算得出的,如何更好地理解二者的关系呢.不妨先看看函数是什么?函数的定义可以简单地描述为:给定一个集合 A,对于其中的元素施加法则 f,则可以 ...

  7. 在C++中使用libuv时对回调的处理

    新的解决方法 https://www.cnblogs.com/ink19/p/13768425.html libuv简介 libuv是一个可以跨平台的C语言库,它提供了基于事件的异步IO支持[1].提 ...

  8. 《C++ primerplus》第13章练习题

    1.对CD类的派生练习.基类CD类存储作者和作品号等信息,派生类Classic额外增加一格"主要作品"的信息.主函数使用拷贝构造函数.按引用传递参数的函数和指针来测试基类和派生类的 ...

  9. 怀疑安装MySQL之后,导致OrCAD Capture、Allegro就打不开

    记得在异常出现之前,只安装了MySQL,之后OrCAD Capture.Allegro就打不开了. Capture.exe - 系统错误 allegro.exe - 系统错误 我尝试在Cadence的 ...

  10. VueCroppie

    下载 VueCroppie VueCroppie是一个Vue 2包装Croppie一个美丽的照片裁剪工具的Javascript由foliotek. 安装 NPM 安装vue-croppie-保存 CD ...