React Native：使用Camera Roll和RNFS保存图片时iOS无法重命名问题

问题原因 #

1. iOS Photos框架限制：系统自带的CameraRoll（基于Photos框架）在导入图片时会自动生成文件名，完全忽略原文件的名称，直接调用CameraRoll.save无法保留自定义文件名。
2. 文件路径缺少扩展名：原代码写入文件时未添加.jpg这类扩展名，iOS可能无法正确识别文件类型，间接导致命名异常。
3. 异步错误未被捕获：原代码使用嵌套then而非await，内层异步操作的错误无法被外层try/catch捕获，导致无法看到报错信息。

解决步骤 #

1. 安装支持自定义文件名的图片保存库 #

使用react-native-image-saver替代iOS端的CameraRoll.save，该库支持直接指定保存到相册的文件名：

npm install react-native-image-saver --save
# 或 yarn安装
yarn add react-native-image-saver

2. 修改代码实现 #

将原函数改为await风格，修复文件路径，并针对iOS替换保存逻辑：

import ImageSaver from 'react-native-image-saver';
import RNFS from 'react-native-fs';
import { Platform, Linking, CameraRoll } from 'react-native';

const handleSaveImageToDevice = async () => {
  try {
    if (Platform.OS === 'android') {
      const granted = await androidPermission();
      if (!granted) {
        Linking.openSettings();
        return;
      }
    }

    // 捕获视图截图，改用await确保错误能被try/catch捕获
    const captureData = await viewShotRef?.current?.capture();
    if (!captureData) throw new Error('视图截图失败');

    // 定义带扩展名的文件名和完整路径
    const fileName = `image-${randomNumber}.jpg`;
    const cacheFilePath = `${RNFS.CachesDirectoryPath}/${fileName}`;

    // 写入缓存文件
    await RNFS.writeFile(cacheFilePath, captureData, 'base64');

    if (Platform.OS === 'android') {
      // Android继续使用CameraRoll（原逻辑正常）
      await CameraRoll.save(cacheFilePath, {
        type: 'photo',
        album: 'Sample Album',
      });
    } else {
      // iOS使用ImageSaver实现自定义文件名保存
      await ImageSaver.saveImage({
        url: cacheFilePath,
        fileName: fileName,
        album: 'Sample Album',
        overwrite: true, // 可选：若需覆盖同名文件则开启
      });
    }

  } catch (e) {
    console.error('图片保存失败：', e);
    return e;
  }
};

3. 配置iOS权限 #

在项目的ios/[项目名]/Info.plist中添加相册权限描述：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册以保存图片</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以保存图片</string>

关键说明 #

• Android端无需修改原逻辑，因为Android的媒体库允许保留原文件名称。
• 改用await后，所有异步操作的错误都会被外层try/catch捕获，方便排查问题。
• react-native-image-saver会直接将指定文件名的图片写入相册，不会被系统自动重命名。

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