[RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁
React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁
该库可以实现启动本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持iOS和Android两个平台,不同平台需要分别配置,详细的文字说明见github。
一、安装
npm install react-native-image-crop-picker -S react-native link react-native-image-crop-picker
二、配置
1)Android
a、Gradle版本必须大于2.2
b、
打开android下的build.gradle ,加入 maven { url "https://jitpack.io" }
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
同时 打开android/app下的build.gradle,在android / defaultConfig / 节点下添加useSupportLibrary
android {
...
defaultConfig {
...
vectorDrawables.useSupportLibrary = true
...
}
...
}
c、打开android/app/src/main/AndroidManifest.xml配置文件,添加权限:
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
d、settings.gradle 添加 (如已被 link 添加,则可跳过)
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
e、MainApplication 中添加 (如已被 link 添加,则可跳过)
import com.reactnative.ivpusic.imagepicker.PickerPackage; ****** @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactVideoPackage(),
new OrientationPackage(),
new VectorIconsPackage(),
new PickerPackage()
);
} ******
2)IOS
由于 笔者 暂时是在Android下开发,后续在IOS中 实践通过,再补充!
三、使用
1)引用
import ImagePicker from 'react-native-image-crop-picker';
2)调用
// 从本地相册选择单幅图像
ImagePicker.openPicker({
width: ,
height: ,
cropping: true
}).then(image => {
console.log(' 图片路径:'+ image);
}); // 调用多个图像
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
}); // 启动相机拍照
ImagePicker.openCamera({
width: ,
height: ,
cropping: true
}).then(image => {
console.log(image);
}); // 裁剪已有的图片
ImagePicker.openCropper({
path: 'image-file-path.jpg',
width: ,
height:
}).then(image => {
console.log(image);
});
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10960484.html
转载请著名出处!谢谢~~
[RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁的更多相关文章
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native常用的第三方开源库
记录一下自己暂目前了解和使用的一些开源库和官方文档和优秀博客介绍,希望对你有帮助☺️: 1.Toast: https://github.com/magicismight/react-native-ro ...
- 2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
- 如何运行开源的React Native项目?
如何运行开源的RN项目? 1.下载 2.解压 3.配置本地sdk位置 sdk.dir = D\:\\Android\\SDK 4.调整gradle版本 apply plugin: "com. ...
- (转)React Native 使用react-native-image-picker库实现图片上传功能
react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装 ...
- React 与 React Native 底层共识:React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- Native VS H5 VS React Native
现在软件行业已经跨入大前端时代,所以势必学一点前端的知识.本来移动端开发都是使用各自平台的语言,如iOS端使用OC,swift:Android使用java,但是随着H5的出现,导致移动端Native出 ...
随机推荐
- 彻底搞懂Javascript的this
在Javascript中,最玄妙的特性之一,就是this的指向玄幻莫测,一会儿指向这一会儿指向那,让初学者十分伤脑筋. 本文总结一下,方便初学者掌握奥妙之处,同时方便老鸟温故而知新. 首先,看一段代码 ...
- 大数据技术 - 为什么是SQL
在大数据处理以及分析中 SQL 的普及率非常高,几乎是每一个大数据工程师必须掌握的语言,甚至非数据处理岗位的人也在学习使用 SQL.今天这篇文章就聊聊 SQL 在数据分析中作用以及掌握 SQL 的必要 ...
- SpringBoot中使用@scheduled定时执行任务需要注意的坑
spring boot: 计划任务@ EnableScheduling和@Scheduled @Scheduled中的参数说明 @Scheduled(fixedRate=2000):上一次开始执行时间 ...
- powershell程序
powershell是一个命令行解释器.它输出一个字符,等待命令行的输入,然后执行这个命令.下面是powershell非常重要的命令:
- .Net Core2.2 在IIS发布
.Net Core应用发布到IIS主要是如下的三个步骤: (1)在Windows Server上安装 .Net Core Hosting Bundle (2)在IIS管理器中创建IIS站点 (3)部署 ...
- python --- Socketserver N部曲(1)
曲一 socketserver 是为了简化服务器端开发而产生的,是一个高级的标准库.(背景介绍完毕,开始干) 一些概念 来自源码的一张图片,简洁又FengSao +------------+ | Ba ...
- 用jQuery的offset()替代javascript的offset
在项目中遇到了一个问题,获取某个块状元素的offsetTop和offsetLeft时候会出现问题,并不是相对浏览器的位置,而是相对于某一个块状元素的位置,具体参照元素也没找到,因为页面中没有设置pos ...
- AQS原理
1. AQS原理 1.1. 是什么 AQS全程AbstractQueuedSynchronizer抽象队列同步器,它是并发包中的基础类 ReetrantLock,ReentrantReadWriteL ...
- WPE 过滤器 滤镜 用法
过滤所有数值匹配的数据包,并修改指定的bit位 打开游戏 打开WPE 附加游戏进程 选项配置 用来配置抓取发送和接收包类型 先抓取发送包,也就是游戏中主动发给服务器的包 点击开始抓包 输入喊话内容 分 ...
- 4 Android可执行文件
APK是Android Package缩写,使用zip解压文件即可打开.每个APK文件中都包含一个class.dex文件(odex过的APK文件除外).class.dex文件就是Android系统Da ...