React Native Expo离线图片预加载及缓存完成验证求助

一、解决预加载数量限制问题 #

仅能加载部分图片通常是并发请求过多触发系统限制，或是FastImage内部并发阈值导致，可通过以下方式处理：

• 分批加载控制并发：将所有图片URL拆分为小批次（比如每批10-15张），完成一批后再加载下一批，避免一次性发起大量网络请求。
• 调整FastImage缓存策略：预加载时设置cache: FastImage.cacheControl.immutable，让图片被永久缓存，减少重复请求的资源消耗。
• 替换为Expo官方组件：考虑使用expo-image替代react-native-fast-image，它对Expo环境兼容性更好，内置更灵活的预加载和缓存配置，能避免第三方库的适配问题。

二、实现预加载进度追踪与完成回调 #

FastImage原生预加载无Promise接口，可通过包装实现状态追踪，或直接使用Expo FileSystem手动下载缓存：

方案1：将FastImage预包装为Promise #

通过创建临时Image实例监听加载状态，把预加载过程转为Promise，实现进度追踪：

import FastImage from 'react-native-fast-image';

// 单张图片预加载Promise化
const preloadSingleImage = (imageUrl) => {
  return new Promise((resolve, reject) => {
    // 触发FastImage缓存
    FastImage.preload([{ uri: imageUrl }]);
    
    // 用Image实例监听加载完成状态
    const tempImage = new Image();
    tempImage.onload = () => resolve({ url: imageUrl, status: 'success' });
    tempImage.onerror = (err) => reject({ url: imageUrl, status: 'failed', error: err });
    tempImage.src = imageUrl;
  });
};

// 分批预加载并追踪进度
const batchPreloadImages = async (allImageUrls, batchSize = 10) => {
  let completedCount = 0;
  const totalCount = allImageUrls.length;

  for (let i = 0; i < totalCount; i += batchSize) {
    const currentBatch = allImageUrls.slice(i, i + batchSize);
    await Promise.all(
      currentBatch.map(url => 
        preloadSingleImage(url)
          .then(() => {
            completedCount++;
            console.log(`缓存进度：${completedCount}/${totalCount}`);
          })
          .catch(err => {
            console.error(`缓存失败 ${err.url}:`, err.error);
            completedCount++;
          })
      )
    );
  }
  console.log('所有图片预加载完成');
};

// 使用示例：传入所有商品图片URL数组
// batchPreloadImages(yourProductImageUrls);

方案2：使用Expo FileSystem手动缓存（更可控） #

直接将图片下载到本地缓存目录，完全掌控每个文件的下载进度和缓存状态，后续展示时直接使用本地路径：

import * as FileSystem from 'expo-file-system';

// 单张图片下载缓存
const cacheImageLocally = async (imageUrl) => {
  // 生成唯一缓存路径
  const cacheFileName = encodeURIComponent(imageUrl) + '.webp';
  const cachePath = `${FileSystem.cacheDirectory}productImages/${cacheFileName}`;

  // 检查是否已缓存
  const fileInfo = await FileSystem.getInfoAsync(cachePath);
  if (fileInfo.exists) {
    return { url: imageUrl, status: 'already_cached', localPath: cachePath };
  }

  // 创建下载任务，监听进度
  const downloadTask = FileSystem.createDownloadResumable(
    imageUrl,
    cachePath,
    {},
    (progress) => {
      const progressPercent = (progress.totalBytesWritten / progress.totalBytesExpectedToWrite * 100).toFixed(2);
      console.log(`下载 ${imageUrl}: ${progressPercent}%`);
    }
  );

  try {
    const result = await downloadTask.downloadAsync();
    return { url: imageUrl, status: 'cached_success', localPath: result.uri };
  } catch (error) {
    return { url: imageUrl, status: 'cached_failed', error };
  }
};

// 批量缓存图片
const batchCacheAllImages = async (allImageUrls, batchSize = 5) => {
  let completedCount = 0;
  const totalCount = allImageUrls.length;
  const cacheResults = [];

  for (let i = 0; i < totalCount; i += batchSize) {
    const currentBatch = allImageUrls.slice(i, i + batchSize);
    const batchResults = await Promise.all(currentBatch.map(cacheImageLocally));
    cacheResults.push(...batchResults);

    completedCount += currentBatch.length;
    console.log(`缓存进度：${completedCount}/${totalCount}`);
  }

  console.log('所有图片缓存完成');
  return cacheResults;
};

额外注意事项 #

• 内存管理：大量图片预加载可能占用过多内存，建议监听React Native的AppState和内存警告事件，在后台时暂停加载，必要时清理过期缓存。
• 缓存清理：可以定期检查缓存目录的文件大小，或根据时间戳清理超过有效期的缓存文件，避免占用过多设备存储空间。

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