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按钮为中文简体》
到此已经结束了,总体来说使用还是很方便的,如有使用上的问题或者疑问欢迎评论留言~
关注下面二维码,订阅更多精彩内容。

分类:
reactnative
标签:
ReactNative
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
2011-11-09 Sql自动配置器原理及其说明
2010-11-09 火狐最实用的几款插件介绍[含附件]