如何基于react-native-fetch-blob优化React Native分享图片大小

Hey 👋，针对你用react-native-fetch-blob实现图片分享时速度慢的问题，核心优化思路就是在分享前对下载的图片进行压缩处理，下面给你两种实操性强的方案，适配你的现有代码：

方案一：使用react-native-image-resizer进行图片压缩（推荐，功能灵活） #

这个库专门用于React Native的图片尺寸/质量压缩，和RNFetchBlob兼容度很高，步骤如下：

1. 先安装依赖：

npm install react-native-image-resizer --save
# 如果你用yarn的话：
# yarn add react-native-image-resizer

（RN 0.60+版本会自动link，旧版本需要手动执行react-native link react-native-image-resizer）

2. 修改你的_downloadImageAndShare方法，在图片下载完成后加入压缩逻辑：

import ImageResizer from 'react-native-image-resizer';

_downloadImageAndShare(url, title, message) {
  const { fs } = RNFetchBlob.fs;
  const self = this;

  RNFetchBlob.config({ fileCache: true })
    .fetch('GET', url)
    .then(res => {
      // 下载完成，拿到原始图片路径
      const originalFilePath = res.path();

      // 开始压缩图片：设置目标尺寸、质量
      return ImageResizer.createResizedImage(
        originalFilePath,
        800, // 目标宽度（可按需调整，比如1080）
        0, // 目标高度设为0会按比例自动缩放
        'JPEG', // 输出格式，可选JPEG/PNG
        70, // 图片质量（0-100，数值越小压缩率越高）
        0, // 旋转角度，不需要就设0
        null, // 输出路径，留空会自动生成缓存路径
        false, // 是否保留图片元数据
        { mode: 'contain' } // 缩放模式，可选contain/cover/stretch
      );
    })
    .then(compressedImage => {
      // 拿到压缩后的图片路径
      const compressedFilePath = compressedImage.path;

      // 执行你的分享逻辑，用压缩后的路径替代原始路径
      Share.share({
        title: title,
        message: message,
        url: `file://${compressedFilePath}`
      });

      // 可选：压缩完成后删除原始缓存图片，节省存储空间
      fs.unlink(originalFilePath);
    })
    .catch(error => {
      console.error('图片下载或压缩失败:', error);
    });
}

方案二：用RNFetchBlob自带的Image模块压缩（无需额外依赖） #

如果你不想引入新库，可以用RNFetchBlob内置的Image模块进行压缩，适合简单的质量调整：

_downloadImageAndShare(url, title, message) {
  const { fs, Image } = RNFetchBlob;
  const self = this;

  RNFetchBlob.config({ fileCache: true })
    .fetch('GET', url)
    .then(res => {
      const originalFilePath = res.path();

      // 读取原始图片的base64编码
      return fs.readFile(originalFilePath, 'base64')
        .then(base64Data => {
          // 对base64图片进行压缩，调整质量
          return Image.compress(base64Data, {
            quality: 0.7, // 质量系数0-1，0.7表示保留70%质量
            format: 'JPEG' // 输出格式
          });
        })
        .then(compressedBase64 => {
          // 将压缩后的base64保存为新的图片文件
          const compressedFilePath = `${fs.dirs.CacheDir}/compressed_${Date.now()}.jpg`;
          return fs.writeFile(compressedFilePath, compressedBase64, 'base64')
            .then(() => compressedFilePath);
        });
    })
    .then(compressedFilePath => {
      // 执行分享逻辑
      Share.share({
        title: title,
        message: message,
        url: `file://${compressedFilePath}`
      });

      // 清理原始缓存文件
      fs.unlink(originalFilePath);
    })
    .catch(error => {
      console.error('处理失败:', error);
    });
}

额外优化建议 #

• 平衡压缩质量与速度：不要追求极致压缩，建议质量设为60-80，既能大幅减小体积，又不会让图片明显模糊。
• 缓存压缩结果：如果用户可能重复分享同一张图片，可以把压缩后的图片路径缓存起来，避免重复压缩。
• 适配不同设备：针对不同分辨率的设备，可以动态调整压缩后的图片尺寸（比如区分安卓和iOS的适配逻辑）。

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