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

叁歲伎倆 2023-10-17 21:06 53阅读 0赞

### **前言：** ###

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

### **效果：** ###

![172074-20171109092913184-583819138.gif][] ![172074-20171109092923981-1603381299.gif][]

### **使用简介：** ###

**原理：**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][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按钮为中文简体》][iOS_retake_use] ###

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

[172074-20171109092913184-583819138.gif]: https://images2017.cnblogs.com/blog/172074/201711/172074-20171109092913184-583819138.gif
[172074-20171109092923981-1603381299.gif]: https://images2017.cnblogs.com/blog/172074/201711/172074-20171109092923981-1603381299.gif
[PictureSelector 2.0]: https://github.com/LuckSiege/PictureSelector
[TZImagePickerController 1.9.0]: https://github.com/banchichen/TZImagePickerController
[https_github.com_syanbo_react-native-syan-image-picker]: https://github.com/syanbo/react-native-syan-image-picker
[iOS_retake_use]: http://www.cnblogs.com/vipstone/p/7814285.html