React Native如何将第三方API返回的Base64二维码保存至相册？

我之前处理过几乎一模一样的场景，分享下我的解决方案和调试技巧：

React-Native-FS是目前维护活跃、可靠性高的文件操作库，完全可以替代维护停滞的React-Native-Fetch-Blob。以下是具体实现步骤：

1. 预处理Base64字符串 #

注意：有些API返回的Base64会带有data:image/jpeg;base64,这类前缀，必须先移除，否则写入的文件会损坏无法打开：

const rawBase64 = json.qr.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');

2. 完整保存代码示例 #

DCIM目录是系统相册默认扫描的目录，写入这里的文件能快速被相册识别，同时Android需要主动通知媒体库更新，否则相册看不到新文件：

import RNFS from 'react-native-fs';
import { Platform, Alert } from 'react-native';

const saveBase64ToGallery = async (base64String) => {
  try {
    // 移除Base64前缀
    const rawBase64 = base64String.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
    // 生成唯一文件名避免覆盖
    const filePath = `${RNFS.DCIMDirectoryPath}/qrcode_${Date.now()}.jpg`;
    
    // 写入文件到本地
    await RNFS.writeFile(filePath, rawBase64, 'base64');
    
    // Android专属：通知媒体库扫描新文件
    if (Platform.OS === 'android') {
      await RNFS.scanFile(filePath);
    }
    
    Alert.alert('成功', '二维码已保存到相册');
  } catch (error) {
    console.error('保存失败:', error);
    Alert.alert('失败', `保存出错：${error.message}`);
  }
};

// 调用保存方法
saveBase64ToGallery(json.qr);

3. 权限配置提醒 #

记得在AndroidManifest.xml中添加对应权限：

• Android 12及以下：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• Android 13及以上：

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

  （Android 13开始WRITE_EXTERNAL_STORAGE已被废弃，RNFS的scanFile方法会自动处理媒体库的写入权限）

你提到的剪贴板方法可行，但更高效的方式是借助Android Studio的Logcat查看日志：

1. 在代码中打印Base64字符串：

   console.log('QR Code Base64:', json.qr);
   

2. 打开Android Studio连接真机，在Logcat中过滤你的App包名，就能找到完整的Base64字符串，直接复制出来用于调试，无需修改代码硬编码。

这个库确实已经多年没有维护，Issues无人响应，很多API在新版本React Native（尤其是0.60+）上会出现路径解析、权限适配等兼容性问题，完全可以用React-Native-FS替代。

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