react-native多圖選擇、圖片裁剪(支援ad/ios圖片個數控制)

標籤：選擇   grid   href   frame   ges   catch   mes   gif   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對象     */

 

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

 

react-native多圖選擇、圖片裁剪(支援ad/ios圖片個數控制)