1. 程式人生 > >react-native多圖選擇、圖片裁剪(支持ad/ios圖片個數控制)

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

多圖片 reac 顯示 async object zimage ram 步驟 技術

扯淡:

  目前關於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圖片個數控制)