专栏首页王磊的博客react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

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按钮为中文简体》

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • RabbitMQ交换器Exchange介绍与实践

    有了Rabbit的基础知识之后(基础知识详见:深入解读RabbitMQ工作原理及简单使用),本章我们重点学习一下Rabbit里面的exchange(交换器)的知...

    Java中文社群-磊哥
  • JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event....

    Java中文社群-磊哥
  • Java提高班(六)反射和动态代理(JDK Proxy和Cglib)

    反射和动态代理放有一定的相关性,但单纯的说动态代理是由反射机制实现的,其实是不够全面不准确的,动态代理是一种功能行为,而它的实现方法有很多。要怎么理解以上这句话...

    Java中文社群-磊哥
  • Python列表解析操作实例总结

    列表推导式提供了一个创建链表的简单途径,无需使用 map() , filter() 以及 lambda 。以定义方式得到列表通常要比使用构造函数创建这些列表更清...

    砸漏
  • RabbitMq-PhpAmqpLib笔记(注:只做笔记-简易手册使用,不做教程)

    use PhpAmqpLib\Connection\AMQPStreamConnection;

    93年的老男孩
  • 以企业级实时数据平台为例,了解何为敏捷大数据

    敏捷大数据,即在敏捷理念原则指导下,构建出一系列通用平台工具,和一整套大数据应用全生命周期方法学,以支撑更轻量、更灵活、更低门槛的大数据实践。本文从理论层面整体...

    宜信技术学院
  • 内存检测工具Valgrind

    Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合。Valgrind由内核(core)以及基于内核的其他调试工具组成。内核类似于...

    张善友
  • MongoDB最简单的入门教程之二 使用nodejs访问MongoDB

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • PYTHON网络编程基础

    《Python网络编程基础》可以作为各层次Python、Web和网络程序的开发人员的参考书,在实际工作中使用书中的技术,效果更佳。

    用户3157710
  • .NET重构—单元测试的代码重构

    阅读目录: 1.开篇介绍 2.单元测试、测试用例代码重复问题(大量使用重复的Mock对象及测试数据) 2.1.单元测试的继承体系(利用超类来减少Mock对象的...

    王清培

扫码关注云+社区

领取腾讯云代金券