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

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

前言:

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

 

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

 

 

 

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
10月前
|
JSON 前端开发 网络架构
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
510 101
鸿蒙开发:一文探究Navigation路由组件
|
弹性计算 小程序
阿里云服务器4核16G配置租赁价格表,多种ECS实例规格可选
阿里云提供多种4核16G服务器实例,如ECS经济型e、高主频hfg8i、通用型g7/u1/g8i/g8ae等。ECS经济型e实例ecs.e-c1m4.xlarge每月低至70元,适用于游戏、Web、小程序后端等场景
406 1
|
存储 Android开发
Android 高版本 packageManager.getPackageArchiveInfo 总是返回null
Android 高版本 packageManager.getPackageArchiveInfo 总是返回null
503 1
|
机器学习/深度学习 数据采集 算法
Python实现支持向量机SVM回归模型(SVR算法)项目实战
Python实现支持向量机SVM回归模型(SVR算法)项目实战
|
运维 Kubernetes 数据可视化
【Docker管理工具】使用Docker部署portainer-ce管理工具
【7月更文挑战第22天】使用Docker部署portainer-ce管理工具
1314 3
【Docker管理工具】使用Docker部署portainer-ce管理工具
|
消息中间件 安全 Java
SpringBoot和SpringCloud版本对应
SpringBoot和SpringCloud版本对应
3823 0
|
Linux 编译器 C语言
CentOS 快速安装Python3和pip3
CentOS是经常使用的Linux系统之一,特别是作为服务器使用,其只自带了Python2,但是现在使用更广泛的是Python3,因此需要自行安装,同时为了更方便地安装第三方库,还需要安装pip3。
java.lang.ExceptionInInitializerError异常原因及解决方法总结
java.lang.ExceptionInInitializerError异常原因及解决方法总结
4807 0
|
Web App开发 iOS开发 开发者
ios证书类型及其作用说明
ios证书类型及其作用说明
225 0