React Native Android添加图片时出现打包错误求助

我之前也踩过这个路径找不到的坑！这种错误在React Native里特别常见，咱们一步步排查解决：

1. 先排查文件名大小写（最容易忽略的点） #

React Native的Metro打包器在Windows系统下是严格区分大小写的！你代码里写的是receiptIcon.PNG，但实际文件可能是receiptIcon.png（小写的.png后缀）——Windows资源管理器默认不显示大小写差异，但Metro会严格匹配文件名，这是绝大多数这类问题的根源。

2. 手动验证路径是否正确 #

从你的ReceiptRow.js所在路径C:\Users\Keith\Desktop\Phase1\Screens\Receipts出发：

• 往上退两级文件夹（../..）会到Phase1根目录
• 然后进入assets/img文件夹，确认里面确实存在receiptIcon.PNG，没有拼写错误（比如是不是imgs而非img？文件名有没有多空格？）

3. 清除Metro缓存 #

有时候打包器的缓存会导致“明明文件存在却找不到”的假象，执行以下命令重置缓存：

npx react-native start --reset-cache

重置后重新启动你的项目试试。

4. 检查Metro配置文件 #

如果你的assets是自定义文件夹，可能需要在metro.config.js里明确配置资源路径：
打开项目根目录的metro.config.js，确保资源扩展名包含png，同时把assets目录加入监听列表：

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    // 确保png在资源扩展名列表里（默认已包含，可确认）
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'png'],
  },
  watchFolders: [
    // 如果assets不在根目录，添加它的绝对路径，比如：
    // path.resolve(__dirname, './assets'),
  ],
});

修改后重启Metro服务。

5. 改用绝对路径（避免相对路径层级混乱） #

相对路径很容易因为文件移动或层级变化出错，推荐配置绝对路径别名：

1. 先安装依赖：

npm install --save-dev babel-plugin-module-resolver

2. 修改babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@assets': './assets', // 给assets目录起别名
        },
      },
    ],
  ],
};

3. 之后在ReceiptRow.js里就可以这样导入图片：

import receiptIcon from '@assets/img/receiptIcon.PNG';

这样就不用再纠结相对路径的层级问题了。

内容的提问来源于stack exchange，提问作者Keith Burke