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 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Sublime 常用快捷键

2672
来自专栏从零开始学自动化测试

Selenium2+python自动化28-table定位

前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

2917
来自专栏Keegan小钢

Android样式的开发:Style篇

前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式。 哪些该定义成统一的样式呢?举几个例子吧:

1432
来自专栏积累沉淀

JavaScript事件

JavaScript事件 对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件模拟,事件方面的...

2566
来自专栏DeveWork

为 WordPress 后台管理菜单自定义排序

在对WordPress 进行二次开发时候,可能需要对 WordPress 后台管理菜单自定义排序,后台管理菜单默认的顺序是文章-多媒体-页面-评论-外观……;还...

2629
来自专栏小程序之家

如何使用小程序视图容器组件

在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

6.5K2
来自专栏前端小叙

vue父组件中获取子组件中的数据

<FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

1.4K10
来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

922
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之FlipView

本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图。 虽然听起来有点拗口,但是它的用途大家一定不会...

35210
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

90513

扫码关注云+社区

领取腾讯云代金券