如何在react-native-image-picker的响应体中获取原始文件名？

问题核心 #

安卓端 react-native-image-picker 4.0+ 版本默认会将选中的文件拷贝到应用缓存目录并重命名，默认返回的文件名为缓存后的重命名值，原始文件名会被隐藏；iOS端无此问题，默认返回原始文件名。

解决方案 #

方案1：调整调用参数（优先推荐，无原生代码修改） #

只需在调用 launchImageLibrary 时新增 includeExtra: true 配置项，开启后返回的资源对象会携带原始文件元信息，直接读取 fileName 字段即可拿到原始文件名。
示例代码：

import { launchImageLibrary } from 'react-native-image-picker';

const selectAnyFile = () => {
  const config = {
    mediaType: 'any', // 如需选取任意类型文件请保持该值，可按需改为photo/video
    includeExtra: true, // 核心配置，开启原始文件元信息返回
  };

  launchImageLibrary(config, (res) => {
    if (res.didCancel || res.errorCode) return;
    const targetAsset = res.assets[0];
    // 该字段即为原始文件名，iOS、安卓双端通用
    const originalFileName = targetAsset.fileName;
    console.log('原始文件名：', originalFileName);
  });
};

注意：该配置仅在 react-native-image-picker 4.0.0 及以上版本生效，低于该版本请先升级到官方稳定版。

方案2：通过URI查询系统媒体库（适配旧版本/特殊场景） #

如果你无法升级库版本，可以通过文件URI查询系统媒体库拿到原始文件名，步骤如下：

1. 先在 android/app/src/main/AndroidManifest.xml 中添加必要的读权限：

<!-- 安卓12及以下版本 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<!-- 安卓13及以上版本适配 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

2. 调用工具库（以 react-native-fs 为例）查询文件信息拿到原始文件名：

import RNFS from 'react-native-fs';

const getOriginalFileName = async (fileUri) => {
  try {
    const fileStat = await RNFS.stat(fileUri);
    return fileStat.name;
  } catch (e) {
    console.error('获取文件名失败：', e);
    return null;
  }
};

// 调用示例：拿到react-native-image-picker返回的资源uri后传入即可
// const name = await getOriginalFileName(targetAsset.uri);

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