React Native中如何实现允许用户选取本地文件的功能

方案1：使用成熟的第三方跨平台库（推荐优先选择） #

目前行业内主流用的是react-native-document-picker，这是维护状态最稳定的原生桥接库，同时适配iOS、Android两端，原生层直接调用系统自带的文件选择能力，不需要你自行封装原生组件。

• 支持自定义可选文件类型，可直接限定仅允许选取pdf、doc、docx、xls等办公文档格式
• 可直接拿到选取文件的uri、文件名、文件大小、MIME类型等核心信息，可直接用于后续上传、本地存储等逻辑
• 基础使用示例：

import DocumentPicker from 'react-native-document-picker';

const selectFile = async () => {
  try {
    const res = await DocumentPicker.pick({
      // 按需配置允许的文件类型
      type: [DocumentPicker.types.pdf, DocumentPicker.types.doc, DocumentPicker.types.docx]
    });
    // 这里的res即为选中的文件信息，可直接处理
  } catch (e) {
    if (DocumentPicker.isCancel(e)) {
      // 处理用户主动取消选择的逻辑
    } else {
      // 处理其他异常逻辑
    }
  }
}

• 仅需要提前配置两端基础权限：Android端配置存储读取权限，iOS端配置文档访问权限，需要支持iCloud文件选取的话额外加iCloud权限即可。

如果你的项目是基于Expo生态开发的，可直接使用expo-document-picker，无需额外做原生侧配置，安装后即可调用，功能覆盖和上面的库基本一致。

方案2：自定义封装原生模块（适用于有特殊定制需求的场景） #

如果你需要在文件选择器中加入自定义UI、自定义过滤规则等特殊业务逻辑，可以自行封装两端原生模块：

• Android端调用系统ACTION_OPEN_DOCUMENT意图拉起系统文件选择器，将选择结果通过React Native桥接层回传给JS侧
• iOS端调用UIDocumentPickerViewController拉起系统文档选择器，通过RCTBridge将结果回传给JS侧
  该方案灵活度最高，但需要你具备Android、iOS原生开发能力。

配套后续处理建议 #

选到文件后如果需要做上传，可直接通过react-native-fs读取文件内容，或者用axios的FormData格式直接传入文件uri即可完成上传；如果需要支持用户在应用内预览文件，可搭配react-native-file-viewer调用系统默认应用打开对应格式的文件。

内容的提问来源于stack exchange，提问作者wezrine