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按鈕為中文簡體》

 

到此已經結束了，總體來說使用還是很方便的，如有使用上的問題或者疑問歡迎評論留言~