iOS端Expo+Firebase图片加载过慢问题求助及优化咨询

很多开发者在Expo React Native项目中使用XHR将图片转为Blob上传到Firebase Storage时，都会遇到iOS端加载/上传延迟1分钟左右的问题，核心原因是iOS对XHR处理本地file://协议的文件效率极低，甚至会阻塞JS线程，导致加载指示器状态更新延迟。以下是经过验证的优化方案：

一、替换XHR转Blob的实现，改用Expo FileSystem #

XHR处理iOS本地文件uri时存在严重性能瓶颈，改用Expo FileSystem读取文件并转换为Blob或直接上传，能大幅提升效率：

方案1：通过FileSystem读取ArrayBuffer转Blob上传 #

import * as FileSystem from 'expo-file-system';
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

const uploadImage = async (imageUri) => {
  const storage = getStorage();
  const storageRef = ref(storage, `posts/${Date.now()}`);
  
  // 获取文件类型信息
  const { mimeType } = await FileSystem.getInfoAsync(imageUri);
  // 读取文件为Base64，再转为Uint8Array
  const base64Str = await FileSystem.readAsStringAsync(imageUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const arrayBuffer = Uint8Array.from(atob(base64Str), char => char.charCodeAt(0));
  
  const blob = new Blob([arrayBuffer], { type: mimeType });
  await uploadBytes(storageRef, blob);
  
  return getDownloadURL(storageRef);
};

方案2：直接用Base64字符串上传（跳过Blob转换） #

Firebase Storage支持直接上传Base64字符串，完全省去Blob转换步骤，性能最优：

import * as FileSystem from 'expo-file-system';
import { getStorage, ref, uploadString, getDownloadURL } from "firebase/storage";

const uploadImage = async (imageUri) => {
  const storage = getStorage();
  const storageRef = ref(storage, `posts/${Date.now()}`);
  
  // 读取图片为Base64
  const base64Str = await FileSystem.readAsStringAsync(imageUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  
  // 上传Base64字符串，指定内容类型
  await uploadString(storageRef, base64Str, 'base64', {
    contentType: 'image/jpeg', // 根据实际图片类型调整为image/png等
  });
  
  return getDownloadURL(storageRef);
};

二、优化FlatList图片渲染效率 #

1. 改用expo-fast-image组件 #

expo-fast-image针对iOS和Android做了图片加载优化，支持缓存和预加载，比原生Image组件快很多：

import FastImage from 'expo-fast-image';

// 在FlatList的renderItem中使用
<FastImage
  source={{ uri: imageUrl }}
  style={{ width: 100, height: 100 }}
  resizeMode={FastImage.resizeMode.cover}
  placeholder={<View style={{ backgroundColor: '#f0f0f0' }} />} // 占位图
/>

2. 优化FlatList渲染参数 #

通过配置以下属性减少初始渲染压力，避免线程阻塞：

<FlatList
  data={posts}
  renderItem={renderItem}
  initialNumToRender={5} // 初始渲染数量
  maxToRenderPerBatch={3} // 每批次渲染数量
  windowSize={5} // 可见区域外预渲染的数量
  removeClippedSubviews={true} // 移除不可见的子视图
/>

三、确保状态更新及时 #

加载指示器延迟显示通常是因为JS线程被XHR转Blob的阻塞操作卡住，使用上述FileSystem的异步方法后，要确保在触发上传/加载时立刻更新isLoading状态：

const handleUpload = async () => {
  setIsLoading(true); // 立刻显示加载指示器
  try {
    const downloadUrl = await uploadImage(selectedImageUri);
    // 保存URL到数据库等操作
  } catch (err) {
    console.error(err);
  } finally {
    setIsLoading(false);
  }
};

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