react-native-image-picker用法
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中添加如下代码:
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文件中添加权限:
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用法的更多相关文章
- React native 中 SectionList用法
一.代码 import React, { Component } from 'react'; import { AppRegistry, View, Text, SectionList, } from ...
- React Native ref高级用法&&setNativeProps使用
ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- 你不可不知的 React Native 混合用法(Android 篇)
前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...
- React Native FlexBox
FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...
- React Native props & state
今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下 ...
- react native AsyncStorage的使用
如果现在有一个需求,是要把用户的账号密码保存到本地,大家会怎么做的呢?如果在android中,我相信一大部分人会想到SharedPreferences,这是一个以键值对的形式进行存储的.那如果在rea ...
- react native 之 react-native-image-picke的详细使用图解
最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke. 该插件可以同时给iOS和Android两个平台下使 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
随机推荐
- JVM学习(八)指令重排序
一.数据依赖性 在学习JVM的指令重排序之前,我们先了解一下什么是数据依赖性: 编译器和处理器在处理具体的指令时,可能会对操作进行重排序来提高执行性能[多条指令并行执行,所以提升性能的同时也可能会导致 ...
- dubbo学习(一)认识dubbo
一.发展背景 单一应用架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的数据访问框架(ORM)是关键. 垂直应用架构 当访问量逐渐增大, ...
- 普转提Day2
T1 给定一个区间,求这个区间中只有一个数字与其他数组不相同的数的个数. 给出的区间范围较大,但是要求的数比较少.所以我的想法是这样的:因为这些数只有一个数字和每个数字都相同的数不同,所以考虑将所有数 ...
- pip安装更换镜像源
说明 有时候网不好,pip安装非常慢,所以需要更换源,特记录如下 国内镜像地址: # 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple # 豆瓣 http ...
- 为cmd中的命令添加别名,以解决java:错误: 编码 GBK 的不可映射字符 (0xAF)
使用sublineText3编写了java代码,通过cmd javac编译 提示 错误:编码GBK的不可映射字符 解决方法 使用javac -encoding UTF-8 Person.java 结果 ...
- 剑指Offer(一):二维数组中的查找
一.前言 刷题平台:牛客网 二.题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...
- C++实现串口通信问题(与Arduino)
参考1(已验证稍加修改可与Arduino通信):https://blog.csdn.net/qq_36106219/article/details/81701368 参考2(比较全,main函数需要自 ...
- CDH5部署三部曲之一:准备工作
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 极简 Node.js 入门 - 4.5 双工流
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- shell-的bash内部命令变量介绍与shift等
一:shell的bash内部命令变量介绍与shift等 1. bash内部变量 有些内部命令在目录列表时是看不见的,他们有shell本身提供,常用的内部命令有:echo,eval,exec,e ...