React Native安卓端加载本地缓存图片失败问题求助

我刚碰到过几乎一模一样的问题！核心原因是Android平台对本地文件URI的格式有特殊要求——React Native的Image组件在Android上需要本地文件路径以file://开头才能识别，而你直接用了文件系统的绝对路径，这就是iOS正常运行但Android失效的关键所在。

最简单的跨平台解决方案：用RNFetchBlob的wrap方法 #

RNFetchBlob自带的wrap方法会根据当前平台自动生成符合要求的URI格式：iOS返回原生文件路径，Android返回带file://前缀的路径，完美适配双平台需求。

修改你代码里的_handleCache方法，把设置state的部分替换成下面的写法：

async _handleCache(source) {
  const path = `${RNFetchBlob.fs.dirs.CacheDir}${sha1(source.uri).toString()}.jpg`;
  const exists = await RNFetchBlob.fs.exists(path);
  if (exists) {
    // 用wrap处理路径，适配双平台
    this.setState({uri: RNFetchBlob.wrap(path)});
  } else {
    await RNFetchBlob
      .config({path})
      .fetch("GET", source.uri, {});
    // 同样用wrap处理新下载的文件路径
    this.setState({uri: RNFetchBlob.wrap(path)});
  }
}

手动处理的替代方案（不推荐，不如wrap省心） #

如果你不想依赖RNFetchBlob的方法，也可以手动判断平台添加前缀：

import { Platform } from 'react-native';

// ...

// 针对Android平台手动添加file://前缀
const formattedUri = Platform.OS === 'android' ? `file://${path}` : path;
this.setState({uri: formattedUri});

额外小提示 #

• 注意你的componentWillMount：在React Native新版本中这个生命周期已经标记为过时，建议改用componentDidMount来执行异步缓存操作，避免潜在的生命周期问题。
• 确认RNFetchBlob已经正确安装并链接（从你的代码能运行来看大概率没问题，但还是提一下防坑）。

修改后测试一下，Android端应该就能正常加载本地缓存的图片了！

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