React Native无法加载Firebase Storage图片，使用react-native-image-cache-hoc报错

根据你提供的代码和问题描述，这个错误大概率是因为Firebase Storage的URI包含特殊字符/查询参数，导致react-native-image-cache-hoc的URI校验逻辑判定其不符合标准。下面是几个针对性的解决方案：

方案1：确保URI完全符合RFC编码标准 #

虽然你的URI看起来已经做了部分编码，但可能存在重复编码或未完全处理的特殊字符。可以尝试先解码再重新编码，避免格式问题：

// 在组件中处理URI
const processUri = (uri) => {
  // 先解码避免重复编码，再重新编码确保格式合规
  const decoded = decodeURIComponent(uri);
  return encodeURI(decoded);
};

// 渲染时使用处理后的URI
<CacheableImage 
  style={styles.image} 
  source={{ uri: processUri(this.props.uri) }} 
  permanent={false} 
/>

方案2：关闭组件的URI校验逻辑 #

如果确认你的URI是可正常访问的，可以直接关闭组件内置的URI校验，添加skipUriValidation: true配置：

const CacheableImage = imageCacheHoc(Image, { 
  fileHostWhitelist: ['firebasestorage.googleapis.com'],
  skipUriValidation: true // 新增该配置跳过URI校验
});

方案3：手动实现Blob缓存逻辑（绕过组件限制） #

如果以上方案都无效，可以手动通过fetch获取Blob并保存到本地，再使用本地URI渲染图片：

import React, { Component } from 'react';
import { Image, ActivityIndicator, Platform } from 'react-native';
import RNFS from 'react-native-fs'; // 需要先安装：npm install react-native-fs

class CachedImage extends Component {
  state = { localUri: null };

  async componentDidMount() {
    const { uri } = this.props;
    const localUri = await this.cacheImage(uri);
    this.setState({ localUri });
  }

  // 手动缓存图片到本地
  cacheImage = async (uri) => {
    // 生成唯一的本地文件名，避免冲突
    const fileName = `${Date.now()}_${uri.split('/').pop().split('?')[0]}`;
    const cacheDir = Platform.OS === 'ios' 
      ? RNFS.DocumentDirectoryPath 
      : RNFS.ExternalStorageDirectoryPath;
    const localPath = `${cacheDir}/${fileName}`;

    // 检查是否已缓存
    if (await RNFS.exists(localPath)) {
      return localPath;
    }

    // 下载Blob并保存到本地
    const response = await fetch(uri);
    const blob = await response.blob();
    const base64Data = await new Promise(resolve => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => resolve(reader.result.split(',')[1]);
    });

    await RNFS.writeFile(localPath, base64Data, 'base64');
    return localPath;
  };

  render() {
    const { style } = this.props;
    if (!this.state.localUri) {
      return <ActivityIndicator />;
    }
    return <Image style={style} source={{ uri: this.state.localUri }} />;
  }
}

// 使用方式
<CachedImage style={styles.image} uri={this.props.uri} />

方案4：升级组件到最新版本 #

旧版本的react-native-image-cache-hoc可能存在对带查询参数URI的处理bug，升级到最新版本大概率能解决问题：

# npm用户
npm update react-native-image-cache-hoc

# yarn用户
yarn upgrade react-native-image-cache-hoc

内容的提问来源于stack exchange，提问作者Gökhan Geyik