React Native问题：FlatList内图片无法正常显示

嘿，我之前也碰到过FlatList里图片加载不出来的情况，咱们一步步来排查解决，应该能找到问题所在：

• 先加错误回调看具体报错
  最直接的方式是给Image组件加上onError回调，打印出具体的加载错误信息，这样能精准定位问题，而不是瞎猜。修改你的Image代码：

  <Image
    source={{ uri: item.imageUrl }}
    style={{ width: 100, height: 100 }}
    onError={(error) => console.log('图片加载失败详情:', error.nativeEvent.error)}
  />
  

  运行后看控制台输出，比如是网络错误、权限问题还是资源不存在，一目了然。

• 检查Android网络权限与明文限制
  如果是Android设备，先确认AndroidManifest.xml里有没有加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

  另外，Android 9（API 28）及以上默认阻止明文HTTP请求，如果你的图片URL是http://开头的，需要配置网络安全策略：在res/xml目录下新建network_security_config.xml，内容如下：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <base-config cleartextTrafficPermitted="true" />
  </network-security-config>
  

  然后在AndroidManifest.xml的application标签里引用这个配置：

  <application
      ...
      android:networkSecurityConfig="@xml/network_security_config">
  

• 排查布局挤压问题
  有时候包裹Image的父View没有明确尺寸，可能导致图片被“藏”起来。你可以给包裹Image的View也加上和Image一致的宽高样式，确保容器能容纳图片：

  <View style={{ width: 100, height: 100 }}>
    <Image source={{ uri: item.imageUrl }} style={{ width: 100, height: 100 }} />
  </View>
  

• 清除缓存试试
  React Native有时候会缓存失败的网络请求，就算你后来修复了URL，它还是会用缓存的失败状态。可以试试：

  • 重启Metro服务（终端按Ctrl+C再重新跑npx react-native start）
  • 卸载APP后重装
  • 清除APP的缓存（在设备的应用设置里操作）

• 测试本地图片验证FlatList功能
  先找一张本地图片放到项目里（比如assets/test.jpg），把Image的source换成require('./assets/test.jpg')，看看能不能在FlatList里正常显示。如果本地图片能显示，说明FlatList本身没问题，问题集中在网络图片的加载配置上；如果本地也不显示，那就要检查FlatList的布局逻辑或者Image组件的使用了。

备注：内容来源于stack exchange，提问作者André Silverio Silva