React Native 文件选择实战react-native-document-picker 从选文件到另存为的完整指南【免费下载链接】react-native-document-pickerDocument Picker and Viewer for React Native项目地址: https://gitcode.com/gh_mirrors/re/react-native-document-picker做个导入 PDF 合同功能时90% 的坑不在 UI而在拿到那个文件 URI 之后有的 URI 是临时授权、App 一杀进程就读不到了有的文件是 Google Docs 这种虚拟文件根本没有实体还有个平台的文件管理器压根不遵守你的类型过滤。react-native-document-picker包名react-native-documents/picker封装了 iOS 的 UIDocumentPicker 和 Android 的 Storage Access Framework把文件选择、类型过滤、多选、另存为、长期访问权限这几件事统一成一套 JS API。30 秒接入装包 第一次 pickyarn add react-native-documents/pickeriOS 项目装完在ios/目录执行pod installAndroid 无需额外配置。Expo 项目不能跑在 Expo Go 里含自定义原生代码需要走expo prebuild --clean打开发构建。然后是最小可用的选择逻辑import DocumentPicker from react-native-documents/picker const onPick async () { try { const res await DocumentPicker.pick() // 不传 type 全部文件 console.log(res[0].uri, res[0].name, res[0].size) } catch (err) { if (DocumentPicker.isCancel(err)) return // 用户点了取消不算错误 console.error(err) } }注意两点结果总是数组哪怕只选了一个用户取消会走 reject所以必须 catch 并用isCancel区分取消和真报错。场景一只收 PDF但别全信文件管理器合同上传、简历投递这类场景要限定类型。库内置了常用 MIME/UTI 常量Android 映射为 MIMEiOS 映射为 UTType一套代码双端自动切换await DocumentPicker.pick({ type: [DocumentPicker.types.pdf], })全部预定义常量pdf、images、video、docx、xlsx、allFiles…在packages/document-picker/src/fileTypes.ts也可以直接传任意字符串。坑Android 上部分第三方文档提供者会无视类型过滤用户仍能挑一个 .docx 出来。响应里的hasRequestedType字段为false时说明用户挑的文件不在你要的类型里这种情况自己做二次校验并提示用户别默默收下。场景二批量导入素材一次挑 N 个图片编辑、素材库应用需要用户一次挑几十张图加一个开关即可const res await DocumentPicker.pick({ type: [DocumentPicker.types.images], allowMultiSelection: true, }) res.forEach(f console.log(f.uri, f.size))每个元素都是完整的元数据对象uri、name、type、size、nativeType直接拿来建索引不用再逐个读文件。场景三把生成的文件另存到用户目录上传完文件反过来还要写出去——比如把导出的报告存到用户的 Documents。saveDocuments会拉起系统的另存为对话框让用户自己挑位置const res await DocumentPicker.saveDocuments({ sourceUris: [reportUri], fileName: 2026-Q2-报告.pdf, // Android 端预填文件名 })平台差异记住一句话就够Android 一次只能存 1 个文件iOS 可以多存fileName只在 Android 生效iOS 的名字取自源文件仅单文件时用户可改mimeType也是 Android 专用建议提供省得系统去猜。import 还是 open文件生命周期怎么选这是最容易踩错的地方直接给结论模式行为适用场景mode: import默认文件复制到 App 沙盒长期可读可上传上传服务器、离线缓存mode: open临时授权App 被杀后失效只读预览一次mode: openrequestLongTermAccess: true返回bookmark重启后凭它重新访问需要跨启动访问同一文件三个模式的行为对比见下图限制为 PDF 的导入模式另外两个配套 APIkeepLocalCopy把content://URI 或虚拟文件Google Docs 之类导出成沙盒里的实体文件目标目录可选cachesDirectory/documentDirectory。上传场景其实用不到它——fetch直接支持content://URI能省一步省一步。pickDirectory选文件夹而不是文件同样支持短期/长期授权。双端配置清单好消息是基本不用配项目AndroidiOS运行时存储权限不需要走 SAF无需 READ/WRITE_EXTERNAL_STORAGE不需要Info.plist 描述文案—不需要系统选择器自带授权流额外依赖无pod install虚拟文件云文档allowVirtualFiles: true开启响应带isVirtual和convertibleToMimeTypes无此概念很多旧教程让你加存储权限、改requestLegacyExternalStorage那是 SAF 之前的做法现在加只会惹审计麻烦。真正的平台差异集中在响应字段Android 的uri是content://iOS 是file://nativeType在 Android 是 MIME、在 iOS 是 UTI。跨端逻辑只认uritype别碰平台私有字段。报错对照表四种 code 各是什么情况catch (err) { if (DocumentPicker.isErrorWithCode(err)) { switch (err.code) { case DocumentPicker.errorCodes.OPERATION_CANCELED: // 用户取消 case DocumentPicker.errorCodes.IN_PROGRESS: // 已有选择器在弹 case DocumentPicker.errorCodes.UNABLE_TO_OPEN_FILE_TYPE: // 类型无法解析 case DocumentPicker.errorCodes.NULL_PRESENTER: // 无可用 UI 上下文 } } }取消OPERATION_CANCELED静默处理不要弹错误提示。IN_PROGRESS按钮防抖或选择器还没关就再次点击了。UNABLE_TO_OPEN_FILE_TYPE检查传给type的字符串是不是合法的 MIME/UTI。上手就干三件事先跑通pick()isCancel这条最小链路再按你的业务挑一条线深入要传服务器走 import 模式要长期引用换 long-term access要写出去用saveDocuments。完整参数表在 安装与配置文档原生实现参考 Android 模块源码 和 iOS 模块源码。【免费下载链接】react-native-document-pickerDocument Picker and Viewer for React Native项目地址: https://gitcode.com/gh_mirrors/re/react-native-document-picker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考