前言：

　　目前關于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, // 最大選擇圖片數目，默認6isCamera: true, // 是否允許用戶在內部拍照，默認trueisCrop: false, // 是否允許裁剪，默認falseCropW: ~~(width * 0.6), // 裁剪寬度，默認屏幕寬度60%CropH: ~~(width * 0.6), // 裁剪高度，默認屏幕寬度60%isGif: false, // 是否允許選擇GIF，默認false，暫無回調GIF數據showCropCircle: false, // 是否顯示圓形裁剪區域，默認falseshowCropFrame: true, // 是否顯示裁剪區域，默認trueshowCropGrid: 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按鈕為中文簡體》

?

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

?

?

?

總結

以上是生活随笔為你收集整理的react-native多图选择、图片裁剪(支持ad/ios图片个数控制)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。