React Native Image组件onError事件如何获取错误信息？

我之前也碰到过这个坑！问题出在不同平台（iOS/Android）下onError事件的nativeEvent结构不一样，而且直接打印事件对象容易因为React的事件池机制看不到有效内容。下面给你两种靠谱的解决方式：

写法一：兼容多平台的详细错误提取 #

<Image
  source={{ uri: '无效的图片链接或本地路径' }}
  onError={(event) => {
    const { nativeEvent } = event;
    // iOS的错误信息嵌套在nativeEvent.error里，有code和message字段
    // Android则直接把错误文本放在nativeEvent.message里
    const errorMessage = nativeEvent.error?.message || nativeEvent.message || '未知加载错误';
    const errorCode = nativeEvent.error?.code || '无错误码';
    console.log('图片加载失败:', { errorCode, errorMessage });
  }}
  style={{ width: 100, height: 100 }}
/>

写法二：快速排查用的全量打印 #

如果你不确定当前平台的错误结构，可以先把整个nativeEvent序列化打印出来，方便针对性提取：

<Image
  source={{ uri: '无效的图片链接或本地路径' }}
  onError={({ nativeEvent }) => {
    console.log('加载错误详情:', JSON.stringify(nativeEvent));
  }}
  style={{ width: 100, height: 100 }}
/>

为啥你的写法没生效？ #

• 第一种写法onError={({ nativeEvent: {error} }) => console.log(error) }：Android平台下nativeEvent里并没有error这个嵌套对象，直接解构自然会得到undefined。
• 第二种写法onError={(err) => console.log(err)}：这里的err是React的合成事件对象，直接打印会因为事件池的回收机制看不到具体内容，必须先取出nativeEvent或者用JSON.stringify序列化后再打印。

另外提一句：本地图片加载错误的信息结构，和网络图片也可能略有不同，用全量打印的方式先摸清结构，再调整提取逻辑会更稳妥。

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