react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:

  目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片裁剪、最大图片个数限制、拍照、本地相册等功能。

效果:

      

使用简介:

原理:react-native-syan-image-picker多图片选择器:
  Android 基于 PictureSelector 2.0
  iOS 基于 TZImagePickerController 1.9.0

iOS/android配置:具体步骤参考:https://github.com/syanbo/react-native-syan-image-picker

核心代码:

import ImagePicker from 'react-native-syan-image-picker'
/**
* 默认参数
*/
const options = {
imageCount: 6,          // 最大选择图片数目,默认6
isCamera: true,         // 是否允许用户在内部拍照,默认true
isCrop: false,          // 是否允许裁剪,默认false
CropW: ~~(width * 0.6), // 裁剪宽度,默认屏幕宽度60%
CropH: ~~(width * 0.6), // 裁剪高度,默认屏幕宽度60%
isGif: false,           // 是否允许选择GIF,默认false,暂无回调GIF数据
showCropCircle: false,  // 是否显示圆形裁剪区域,默认false
showCropFrame: true,    // 是否显示裁剪区域,默认true
showCropGrid: false     // 是否隐藏裁剪区域网格,默认false
  };
/**
* 以Callback形式调用
* 1、相册参数暂时只支持默认参数中罗列的属性;
* 2、回调形式:showImagePicker(options, (err, selectedPhotos) => {})
*  1)选择图片成功,err为null,selectedPhotos为选中的图片数组
*  2)取消时,err返回"取消",selectedPhotos将为undefined
*  按需判断各参数值,确保调用正常,示例使用方式:
*      showImagePicker(options, (err, selectedPhotos) => {
*          if (err) {
*              // 取消选择
*              return;
*          }
*          // 选择成功
*      })
*
* @param {Object} options 相册参数
* @param {Function} callback 成功,或失败回调
*/
/**
* 以Promise形式调用
* 1、相册参数暂时只支持默认参数中罗列的属性;
* 2、使用方式
*  1)async/await
*  handleSelectPhoto = async () => {
*      try {
*          const photos = await SYImagePicker.asyncShowImagePicker(options);
*          // 选择成功
*      } catch (err) {
*          // 取消选择,err.message为"取消"
*      }
*  }
*  2)promise.then形式
*  handleSelectPhoto = () => {
*      SYImagePicker.asyncShowImagePicker(options)
*      .then(photos => {
*          // 选择成功
*      })
*      .catch(err => {
*          // 取消选择,err.message为"取消"
*      })
*  }
* @param {Object} options 相册参数
* @return {Promise} 返回一个Promise对象
*/

 

小技巧:iOS拍照为英文,如果需要设置成中文简体,请看这篇:《iOS设置拍照retake和use按钮为中文简体》

 

到此已经结束了,总体来说使用还是很方便的,如有使用上的问题或者疑问欢迎评论留言~

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT5主界面“关闭窗口”按钮设置弹出提示询问信息

QT5主界面为“关闭窗体”按钮和其action添加关闭窗口事件,可以询问是否退出 1.在信号与槽函数中,actQuit关联信号与槽函数,如下: 2.在mainwindow.h文件MainWindow类中添加关闭窗口事件closeEvent 3.在mainwindow.cpp文件添加vo…

Pytorch torchvision完成Faster-rcnn目标检测demo及源码详解

Torchvision更新到0.3.0后支持了更多的功能,其中新增模块detection中实现了整个faster-rcnn的功能。本博客主要讲述如何通过torchvision和pytorch使用faster-rcnn,并提供一个demo和对应代码及解析注释。 目录 如果你不想深入了解原理和训练&#xff0c…

Hadoop安装配置

1、集群部署介绍 1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台。以Hadoop分布式文件系统(HDFS,Hadoop Distributed Filesystem)和MapReduce(Google MapReduce的开源实现)为核心的Hadoop为用户…

iOS设置拍照retake和use按钮为中文简体

iOS设置拍照retake和use按钮为中文简体,设置有两种方式一个是代码直接控制,第二就是xcode配置本机国际化为“china”(简体中文)。 本文重点要说的是第二种,这样配置有两个好处,一是操作比较简单&#xff0…

QT5 QSqlQuery的SELECT INSERT UPDATE DELETE命令用法

1.QSqlQuery的SELECT查询记录用法: QSqlQuery q("SELECT * FROM departments");QSqlRecord rec q.record();int idCol rec.indexOf("departID"); // index of the field "departID"int nameColrec.indexOf("department")…

实时手势识别 【手部跟踪】Mediapipe中的hand

参考链接: 1)github代码链接:https://github.com/google/mediapipe 2)说明文档:https://google.github.io/mediapipe 3)python环境配置文档:https://google.github.io/mediapipe/getting_sta…

react native仿微信性别选择-自定义弹出框

简述 要实现微信性别选择需要使用两部分的技术: 第一、是自定义弹出框; 第二、单选框控件使用; 效果 实现 一、配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址:https://github.com/jacklam…

斯蒂芬斯蒂芬但是当时发生的s

2019独角兽企业重金招聘Python工程师标准>>> 什么是啊啊啊啊啊啊啊 "> 转载于:https://my.oschina.net/ivanfjz/blog/190114

Error processing line 1 of vision-1.0.0-py3.6-nspkg.pth AttributeError: ‘NoneType‘ object has no

最近调试代码不知道安装什么包导致代码运行的时候出现报错 AttributeError: NoneType object has no attribute loader ,虽然代码也能运行通过,但是报错还是很不舒服。 Remainder of file ignored Error processing line 1 of D:\Anaconda3\envs\fastrc…

华为交换机S3700清空配置方法

1、用户视图下输入:reset saved-configuration;输入:Y,确认清除 2、输入:reboot;重启系统(第1次提示输入:N 不保存配置;第2次提示输入:Y 确认重启&#xff0…

Udp通讯(零基础)

前面学习了Tcp通讯之后听老师同学们讲到Udp也可以通讯,实现还要跟简单,没有繁琐的连接,所以最近学习了一下,记录下来以便忘记,同时也发表出来与大家相互学习,下面是我自己写的一个聊天例子,实现…

VOC数据集格式转化成COCO数据集格式

VOC数据集格式转化成COCO数据集格式 一、唠叨 之前写过一篇关于coco数据集转化成VOC格式的博客COCO2VOC,最近读到CenterNet的官方代码,实现上则是将voc转化成coco数据格式,这样的操作我个人感觉很不习惯,也觉得有些奇葩&…

react native android6+拍照闪退或重启的解决方案

前言 android 6权限使用的时候需要动态申请&#xff0c;那么在使用rn的时候要怎么处理拍照权限问题呢&#xff1f;本文提供的是一揽子rn操作相册、拍照的解决方案&#xff0c;请看正文的提高班部分。 解决步骤 1、AndroidManifest.xml设置拍照权限&#xff1a; <uses-perm…

学术论文SCI、期刊、毕业设计中的图表专用软件

Origin Origin是由OriginLab公司开发的一个科学绘图、数据分析软件&#xff0c;支持在Microsoft Windows下运行。Origin支持各种各样的2D/3D图形。Origin中的数据分析功能包括统计&#xff0c;信号处理&#xff0c;曲线拟合以及峰值分析。 Origin中的曲线拟合是采用基于Lever…

常用的学术论文图表(折线图、柱状图)matplotlib python代码模板

最终选用了pythonMatplotlib。Matplotlib是著名Python的标配画图包&#xff0c;其绘图函数的名字基本上与 Matlab 的绘图函数差不多。优点是曲线精致&#xff0c;软件开源免费&#xff0c;支持Latex公式插入&#xff0c;且许多时候只需要一行或几行代码就能搞定。 然后小编经过…

史上最详细nodejs版本管理器nvm的安装与使用(附注意事项和优化方案)

使用场景 在Node版本快速更新迭代的今天&#xff0c;新老项目使用的node版本号可能已经不相同了&#xff0c;node版本更新越来越快&#xff0c;项目越做越多&#xff0c;node切换版本号的需求越来越迫切&#xff0c;传统卸载一个版本在安装另一个版本的方式太过于麻烦&#xf…

【TensorFlow】 基于视频时序LSTM的行为动作识别

简介 本文基于LSTM来完成用户行为识别。数据集来源&#xff1a;https://archive.ics.uci.edu/ml/machine-learning-databases/00240/ 此数据集一共有6种行为状态&#xff1a; 行走&#xff1b; 站立&#xff1b; 躺下&#xff1b; 坐下&#xff1b; 上楼&#xff1b; 下楼&am…

利用Asp.net MVC处理文件的上传下载

如果你仅仅只有Asp.net Web Forms背景转而学习Asp.net MVC的&#xff0c;我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.FileUpload就是其中一个&#xff0c;而这个控件的缺席给我们带来一些小问题。这篇文章主要说如何在Asp.net MVC中上传…

Python遍历文件夹下所有文件及目录

遍历文件夹中的所有子文件夹及子文件使用os.walk()方法非常简单。 语法格式大致如下&#xff1a; os.walk(top[, topdownTrue[, onerrorNone[, followlinksFalse]]]) top – 根目录下的每一个文件夹(包含它自己), 产生3-元组 (dirpath, dirnames, filenames)【文件夹路径, 文…

华为交换机telnet和ftp服务开启/关闭命令

1.telnet开启/关闭 在系统视图下 启用方式如下&#xff1a; telnet server enable //使能telnet服务关闭方式如下&#xff1a; undo telnet server //关闭telnet服务2.FTP开启/关闭 通过display ftp-server查看启用状态 如果已经启用&#xff0c;会在查看的命令中显示&#…