React Native：如何重命名相机胶卷中保存的图片文件名

@react-native-community/cameraroll的save方法本身不支持直接自定义文件名，要实现这个需求，得先把captureRef生成的临时文件复制到自定义命名的路径，再将新路径的文件保存到相册。

步骤1：安装文件操作依赖 #

需要借助react-native-fs处理文件复制与重命名：

npm install react-native-fs --save
# 或用yarn
yarn add react-native-fs

（RN 0.60+版本自动完成链接，低版本需手动配置链接）

步骤2：修改保存逻辑 #

替换原有的handleSaveImageToDevice函数，先完成文件重命名再存入相册：

import RNFS from 'react-native-fs';

const handleSaveImageToDevice = async () => {
  try {
    // 捕获视图生成临时图片文件
    const tempUri = await captureRef(viewRef, {
      format: 'jpg',
      quality: 0.8,
    });

    // 定义自定义文件名与目标存储路径
    const customFileName = 'generated_image.jpg';
    // 使用RNFS临时目录存储重命名后的文件，也可替换为RNFS.DocumentDirectoryPath（应用私有目录）
    const targetPath = `${RNFS.TemporaryDirectoryPath}/${customFileName}`;

    // 复制临时文件到目标路径，完成重命名
    await RNFS.copyFile(tempUri, targetPath);

    // 将重命名后的文件存入指定相册
    const savedUri = await CameraRoll.save(targetPath, {
      type: 'photo',
      album: 'Generated Image',
    });

    // 可选：删除临时文件释放存储空间
    await RNFS.unlink(tempUri);

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

注意事项 #

• 权限配置：
  • iOS：在Info.plist中添加NSPhotoLibraryAddUsageDescription（写入相册权限说明）和NSFileProviderDomainUsageDescription（文件访问权限说明）
  • Android：Android 10及以下需在AndroidManifest.xml中添加WRITE_EXTERNAL_STORAGE权限；Android 11+遵循Scoped Storage规则，react-native-fs会自动适配大部分场景
• 避免文件覆盖：如果需要多次保存不重名的文件，可以在文件名后追加时间戳，比如generated_image_${Date.now()}.jpg
• 路径选择：临时目录的文件会被系统自动清理，适合临时处理的文件；若需长期保存，可改用应用私有文档目录RNFS.DocumentDirectoryPath

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