使用react-native-expo-image-cache时本地图片无法显示如何解决

• react-native-expo-image-cache 提供的Image组件仅支持传入远程网络图片的url作为uri参数，没有适配React Native本地静态资源的解析逻辑
• 你当前直接传入本地图片的相对路径字符串../assets/No_Image_Available.jpg，会被组件识别为无效的远程资源地址，因此无法加载

方案1：拆分渲染逻辑（推荐） #

远程图片使用缓存组件加载，本地占位图调用React Native原生Image组件加载，代码示例如下：

1. 引入原生Image组件

import { Image as RNImage } from 'react-native';
import { Image } from "react-native-expo-image-cache";

2. 修改渲染判断逻辑

// 有远程图片时用缓存组件，无图时用原生组件加载本地占位图
{image && image.length ? (
  <Image 
    style={styles.image} 
    uri={`${URL_IMG}${image[0]?.s_path}${image[0]?.pk_i_id}.${image[0]?.s_extension}`} 
  />
) : (
  <RNImage 
    style={styles.image} 
    source={require("../assets/No_Image_Available.jpg")} 
  />
)}

方案2：统一使用远程路径 #

将占位图上传到你的项目静态资源服务器，直接使用远程url作为无图时的uri参数传入缓存组件即可。

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