Expo环境下React Native下载Base64图片报错：undefined is not an object

错误原因 #

原代码中RNFetchBlob.config({...}).fs.writeFile()的用法有误：config()方法返回的是用于配置远程fetch请求的会话对象，该对象并不包含fs属性，因此触发undefined is not an object (near '...}).fs.writeFile(downloadD...')错误。直接调用RNFetchBlob.fs.writeFile()能成功写入文件，但缺少系统下载通知的反馈逻辑。

解决方案 #

修正代码结构，移除错误的链式调用，在文件写入完成后手动触发Android/iOS的下载通知：

import { Platform } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';

const saveImg = async (base64Img: string, success: Function, fail: Function) => {
  const isAndroid = Platform.OS === "android";
  const isIos = Platform.OS === 'ios';

  // 统一使用RNFetchBlob的路径常量，避免RNFS与RNFetchBlob混用
  const dirs = isIos ? RNFetchBlob.fs.dirs.LibraryDir : RNFetchBlob.fs.dirs.DownloadDir;
  const certificateTitle = 'certificate-' + ((Math.random() * 10000000) | 0);
  const downloadDest = `${dirs}/${certificateTitle}.png`;
  const imageDatas = base64Img.split('data:image/png;base64,');
  const imageData = imageDatas[1];

  try {
    // 直接写入Base64图片文件
    await RNFetchBlob.fs.writeFile(downloadDest, imageData, 'base64');

    // Android端触发系统下载完成通知
    if (isAndroid) {
      await RNFetchBlob.android.addCompleteDownload({
        title: `${certificateTitle}.png`,
        description: '证书已下载完成',
        mime: 'image/png',
        path: downloadDest,
        showNotification: true,
      });
    } else {
      // iOS端预览文件，可选添加本地通知
      await RNFetchBlob.ios.previewDocument(downloadDest);
      // 若需iOS通知，可集成expo-notifications模块发送本地通知
    }

    success();
  } catch (error: any) {
    console.log(error);
    fail();
  }
};

关键说明 #

1. 路径统一：使用RNFetchBlob.fs.dirs下的路径常量，避免不同文件操作库的路径混淆；Android选用DownloadDir可让用户在系统下载目录快速找到文件。
2. Android通知：通过RNFetchBlob.android.addCompleteDownload触发系统标准下载通知，符合用户对下载反馈的预期。
3. iOS处理：保持previewDocument预览逻辑，若需通知可集成Expo的expo-notifications模块发送本地通知。

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