Expo环境下React Native组件图片无法显示问题求助

可能的解决方向： #

• 确认网络权限配置
  检查app.json（或app.config.js）的Android权限配置，确保包含INTERNET权限（Expo项目默认已配置，但可再次确认）：

  {
    "expo": {
      "android": {
        "permissions": ["INTERNET"]
      }
    }
  }
  

• 替换样式为RN原生写法测试
  若使用了nativewind的className，可能存在样式未生效的情况，尝试改用RN原生style属性：

  <Image
    source={{ uri: imgUrl }}
    style={{ width: 80, height: 80, borderRadius: 8 }}
  />
  

• 正确使用传入的props
  当前CategoryCard组件接收了imgUrl参数但未使用，建议替换写死的URL为传入的props，同时避免后续维护问题：

  <Image
    source={{ uri: imgUrl }}
    className="h-20 w-20 rounded"
  />
  

• 优化TouchableOpacity的包裹样式
  给TouchableOpacity添加间距样式，确保图片和文字能正常展示：

  <TouchableOpacity style={{ marginRight: 12, alignItems: 'center' }}>
    <Image ... />
    <Text style={{ marginTop: 4, textAlign: 'center' }}>{title}</Text>
  </TouchableOpacity>
  

• 测试其他图片地址
  更换为一个确定可访问的图片URL（如https://picsum.photos/200），排查是否为原URL的访问问题。

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