Expo Bare Workflow下React Native多图选择功能实现方案咨询
Expo Bare Workflow 移动端相册多选图片实现方案
方案一:调用系统/第三方应用原生多选能力 (优先推荐,无需自定义相册)
对应你期望的类似Reddit的调用第三方应用完成选择的效果,开发成本极低,不用处理相册相关的复杂逻辑:
- Android端:调用系统ACTION_PICK意图,配置
EXTRA_ALLOW_MULTIPLE标记,系统会自动唤起所有支持多选的图片选择应用,包括Google Photos、本地文件管理器、云盘应用等,用户完成选择后直接返回选中资源的uri,你只需要在原生层封装意图结果的接收逻辑,暴露给JS层调用即可。 - iOS端:iOS14及以上系统自带PHPickerViewController组件,原生支持多选,将选择上限参数设为0即可不限制选中数量,调用后直接弹出系统自带的选择器,支持全量相册无感知浏览,自带iCloud资源加载能力,体验和系统相册完全一致。
方案二:自定义内置相册实现类Telegram的无感知滚动效果
如果你需要完全内置的相册选择体验,用expo-media-library即可实现你要的无感知滚动,分页逻辑可以做到对用户完全透明:
- 首次调用
getAssetsAsync时将first参数设为100~200,根据你的缩略图展示尺寸调整,避免一次性加载过多资源导致内存溢出。 - 资源列表用FlatList渲染,设置
onEndReachedThreshold为0.30.5,也就是滚动到距离列表底部还有30%50%高度的时候自动触发下一页资源加载,加载过程不要弹出任何加载提示,用户完全感知不到分页的存在,和浏览全量列表效果一致。 - 额外可以添加预加载逻辑:第一页资源加载完成后,后台静默加载第二页资源,用户刚开始滚动时第二页已经加载完成,完全不会出现等待空白。
- 缩略图用性能优化过的图片组件渲染,开启内存和磁盘缓存,避免滚动过程中出现卡顿。
通用注意事项
- 权限适配:iOS端要配置相册访问权限说明,Android13及以上要配置
READ_MEDIA_IMAGES权限,低版本配置READ_EXTERNAL_STORAGE权限,打开选择器前要主动申请权限,避免资源加载失败。 - 选中状态管理:用资源唯一id作为标记存储选中状态,和资源列表渲染逻辑分离,不会因为分页加载导致选中状态丢失。
内容的提问来源于stack exchange,提问作者Doougui
相关产品推荐
相关产品推荐

