FlatList渲染图片不显示问题排查求助

嘿，我懂你现在的困扰——明明图片路径和名称都对，FlatList里却只显示了每个条目的key，图片死活不出来对吧？咱们来快速定位问题并解决它：

核心问题：React Native本地图片的加载方式错了 #

你现在用的是source={{uri: item.logo}}来加载本地图片，但这个写法只适用于网络图片或者设备文件系统里的图片，对于项目里的静态本地资源，React Native要求必须用require()来引入，不然打包工具（Metro）没法正确识别和处理这些资源。

具体修改步骤 #

1. 修正数据里的图片引用方式
   把data数组里的logo字段改成require()包裹的形式，注意路径要和你的项目结构匹配（比如所有图片都放在../assets目录下的话）：

   const data = [
     { key: 'Tiago', logo: require('../assets/athlean_x.png') },
     { key: 'Beatriz', logo: require('../assets/euro2020.png') },
     { key: 'Ricardo', logo: require('../assets/jamor.png') },
     { key: 'Miguel', logo: require('../assets/rock_in_rio.png') },
     { key: 'Simão', logo: require('../assets/splash.png') },
     { key: 'David', logo: require('../assets/edp_cooljazz.png') }
   ];
   

   👉 这里要确认所有图片的路径都是正确的，比如如果你的HomeScreen组件在src/screens/HomeScreen.js，而assets文件夹在项目根目录，那路径应该是../../assets/xxx.png，根据你的实际目录结构调整。

2. 修改Image组件的source属性
   不再用{uri: ...}，直接把source设为item.logo即可：

   <Image 
     style={{width:50, height:50, alignSelf: 'center', borderRadius:300}} 
     source={item.logo}
   />
   

为什么这样改？ #

React Native的静态资源是通过require()来标记的，打包工具会在构建时把这些资源复制到正确的位置，并生成对应的资源ID，这样运行时才能正确找到图片。而uri方式是直接读取指定路径的文件，项目打包后本地静态资源的实际路径会变化，所以用uri根本找不到这些资源。

按照这个方法修改后，你的FlatList里的图片应该就能正常显示啦~

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