Expo开发构建中Firebase Storage图片无法在React Native iOS端显示求助

大家好，我现在在开发一个React Native + Expo的应用，用Firebase Storage来存储宝宝照片，但遇到了一个特别头疼的问题：图片上传到Storage完全正常，也能拿到下载URL，甚至把URL复制到浏览器里打开能正常显示，但在iOS模拟器和真机的开发构建里，不管用React Native原生的Image组件还是Expo的Image组件，都加载不出图片，想请各位大佬帮忙排查下原因！

我的上传与加载代码 #

图片上传函数 #

我用这个异步函数处理图片上传，先尝试putFile失败的话会自动降级到Blob方式，上传流程没有报错，能成功获取到下载URL：

const uploadPhoto = async (uri, userId) => {
  const filePath = Platform.OS === "ios" ? uri.replace("file://", "") : uri;
  const ref = storage().ref(
    `users/${userId}/baby_photos/${userId}_${Date.now()}`
  );
  try {
    await ref.putFile(filePath);
    return await ref.getDownloadURL();
  } catch (err) {
    console.warn("putFile failed, trying blob method:", err.message);
    try {
      const response = await fetch(uri);
      const blob = await response.blob();
      await ref.put(blob);
      return await ref.getDownloadURL();
    } catch (blobErr) {
      console.error("Blob upload failed too:", blobErr.message);
      throw blobErr;
    }
  }
};

图片加载组件 #

不管用原生Image还是Expo Image，写法都是类似这样的：

<Image 
  source={{ uri: url }} 
  style={styles.photo} 
  resizeMode="cover" 
/>

为了调试，我专门写了个测试组件，同时加载Firebase Storage的图片和一张外部测试图片：

import { Dimensions, Image, StyleSheet, View } from "react-native";

const FirebaseImageViewer = () => {
  const firebaseStorageImage = "https://firebasestorage.googleapis.com/v0/b/little-steps-1.firebasestorage.app/o/users%2FiEuuB6zxdVWgRaar3MmeekUpJxJ2%2Fbaby_photos%2FiEuuB6zxdVWgRaar3MmeekUpJxJ2_1748991344733?alt=media&token=e89e6e11-3d0b-4fb8-ac00-adf574fc4cc2";
  const otherImageUrl = "https://cdn.pixabay.com/photo/2021/12/12/20/00/play-6865967_640.jpg";

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: firebaseStorageImage }}
        style={styles.image}
        resizeMode="cover"
        onError={(e) => console.warn(
          "❌ Failed to load firebase image",
          e?.nativeEvent?.error || "Unknown"
        )}
        onLoad={() => console.log("Firebase image loaded successfully")}
      />
      <Image
        source={{ uri: otherImageUrl }}
        style={styles.image}
        resizeMode="cover"
        onError={(e) => console.warn(
          "❌ Other image Failed to load",
          e?.nativeEvent?.error || "Unknown"
        )}
        onLoad={() => console.log("Other image loaded successfully")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    padding: 10,
    flex: 1,
  },
  image: {
    width: Dimensions.get("window").width - 40,
    height: 300,
    borderRadius: 12,
  },
});

export default FirebaseImageViewer;

调试日志 #

控制台输出的错误信息如下：

WARN ❌ Failed to load firebase image The network connection was lost.
WARN ❌ Other image Failed to load The request timed out.
LOG Other image loaded successfully
› Reloading apps iOS Bundled 48ms node_modules/expo-router/entry.js (1 module)
WARN ❌ Failed to load firebase image cannot parse response
LOG Other image loaded successfully

可以看到外部测试图片偶尔会超时但最终能加载成功，而Firebase的图片要么报“网络连接丢失”要么报“无法解析响应”，完全加载不出来。

已排除的可能性 #

• Storage权限问题：我的Storage规则已经设置为完全开放读写，排除了权限拦截的可能：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

• 图片URL有效性：直接在浏览器打开Firebase的图片URL，能正常显示，没有任何报错。

现在实在卡在这里了，有没有朋友遇到过类似的情况？或者有什么我没考虑到的调试方向？麻烦大家给点思路，谢谢了！

内容来源于stack exchange