如何在react-native-navigation顶部导航栏添加图标？解决打包报错

云原生阿岚

2026-5-22

我之前也碰到过一模一样的问题，这个报错本质是Metro打包器没法正确解析本地PNG图片导致的，下面给你几个针对性的解决方案，按顺序排查就行：

先明确你的问题场景

你尝试给Wix React Native Navigation的顶部导航栏右侧添加加号图标，使用本地navicon_add2x.png图片时触发打包错误，错误信息如下：

Bundling index.android.js [development, non-minified, hmr enabled] 0.0% (3/662), failed. error: bundling failed: "TransformError F:/work/www/native/project8/wixnav/img/navicon_add2x.png: Unexpected character '�' (1:0) [F:\work\www\native\project8\wixnav\img\navicon_add2x.png]"
�PNG
^
3 |
4 | IHDR # # 6�� tRNS �� IDATxc�Ϡ��!

解决方案逐一排查

1. 用`require()`正确引入图片

这是最常见的坑！在Wix React Native Navigation中设置导航栏图标时，绝对不能直接写图片路径字符串，必须用React Native的require()方法引入本地图片：

// 正确的写法示例
Navigation.setOptions(this.props.componentId, {
  rightButtons: [
    {
      id: 'addButton',
      icon: require('./img/navicon_add2x.png'), // 路径要和当前组件文件的位置对应
    },
  ],
});

注意：如果图片所在文件夹和当前组件不在同一层级，要调整路径的相对层级，比如组件在src/screens，图片在src/img，就写成require('../img/navicon_add2x.png')。

2. 检查Metro配置是否支持图片

如果你的项目自定义过metro.config.js，要确保没有误排除PNG等图片扩展名。默认情况下Metro是支持图片解析的，若你修改过配置，参考下面的基础配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

这个配置会继承默认的文件类型支持，包含png、jpg等常见图片格式。

3. 验证图片文件是否完好

报错里的�PNG提示文件可能损坏或格式不正确，你可以：

用系统自带的图片查看器打开这张图，确认能正常显示
重新导出/下载这张PNG图片，确保文件是完整有效的PNG格式

4. 清理缓存重新打包

缓存问题也可能导致这类奇怪的解析错误，执行以下命令重置缓存后重新打包：

# 重置Metro缓存并启动服务
npx react-native start --reset-cache
# 重新运行Android项目
npx react-native run-android

按照上面的步骤排查，大概率能解决你的问题，其中用require()引入图片是最容易忽略的点，建议优先检查这个。

内容的提问来源于stack exchange，提问作者Omar Awamry