React Native应用中图片列表无法正常显示的问题求助

问题核心排查方向 #

结合你的代码与配置，图片时显时隐/无法加载的问题，主要集中在尺寸约束、缓存策略、布局冲突这几个层面，以下是可直接落地的修复步骤：

1. 给Image组件设置明确的尺寸约束 #

React Native的Image组件（包括expo-image）必须有清晰的宽高定义，否则会因布局计算异常导致加载失败。修改Item.tsx中的Image代码：

// 替换原Image部分
<Image
  source={{ uri: src }} // 恢复使用动态传入的src
  style={{ width: '100%', height: 160 }} // 明确高度，适配父容器200的总高度
  resizeMode="cover" // 根据需求选择cover/contain，避免图片拉伸
/>

⚠️ 注意：网络图片的尺寸不能写在source对象里，必须放在style中。

2. 用expo-image优化缓存策略 #

如果使用expo-image，默认缓存策略可能导致重复加载丢失，改为持久化缓存：

// 导入expo-image
import { Image } from "expo-image";

// 使用时配置缓存
<Image
  source={{ uri: src }}
  style={{ width: '100%', height: 160 }}
  cachePolicy="memory-disk" // 同时缓存到内存和磁盘，提升加载稳定性
  resizeMode="cover"
/>

3. 修正父容器布局约束 #

外层View的h-[200]需要明确分配图片和标题的高度，避免布局挤压：

<View className="w-[95%] h-[200] border-1 items-center self-center mb-3 rounded-t-2xl border-x-cyan-50 overflow-hidden">
  <TouchableWithoutFeedback onPress={() => {
    router.push({ pathname: "(item)/food-item", params: { vendorId } });
  }}>
    {/* 用View包裹图片，明确占80%高度 */}
    <View style={{ width: '100%', height: '80%' }}>
      <Image
        source={{ uri: src }}
        style={{ width: '100%', height: '100%' }}
        resizeMode="cover"
      />
    </View>
  </TouchableWithoutFeedback>
  {/* 标题栏占剩余20%高度 */}
  <View className="border-2 border-gray-300 border-t-white w-[100%] h-[20%] justify-center">
    <Text className="text-xl font-semibold text-center">{title}</Text>
  </View>
</View>

添加overflow-hidden确保图片不会超出圆角容器，避免视觉异常。

4. 排查URL与网络问题 #

• 确认src是完整的HTTPS链接（React Native默认拦截HTTP请求，如需HTTP需在app.json中配置ios.infoPlist.NSAppTransportSecurity和android.networkSecurityConfig）
• 打印src检查是否存在空格、未编码的特殊字符
• 验证接口返回的URL是否有过期、权限限制等问题

5. 清除缓存重启项目 #

metro缓存可能导致资源加载异常，执行以下命令重启：

expo start --clear

同时卸载模拟器/真机上的APP，重新安装。

验证步骤
先固定使用测试URL（如https://reactnative.dev/img/tiny_logo.png）并给它设置明确style，确认稳定显示后，再替换为动态src，逐步排查是否为动态URL的问题。

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