React Native 从同级目录导入图片时报错无法解析模块

云原生阿岚

2026-10-4

解决步骤

先核对实际运行代码的路径拼写：你贴出的报错信息显示程序正在查找./assets/padlock.png（也就是Screens目录下的assets文件夹），和你给出的示例代码里的../assets/padlock.png不符，先确认你实际运行的代码没有把上层目录标识../误写为当前目录标识./。
清理Metro缓存后重启服务：React Native的Metro打包服务经常出现缓存异常，导致正确路径也无法识别，停止当前运行的打包服务后执行对应命令重启：
```
# 原生React Native项目
npx react-native start --reset-cache
# Expo项目
npx expo start --clear
```
检查文件名大小写是否完全匹配：Windows系统文件名默认不区分大小写，但Metro打包时会严格校验大小写，确认assets目录下的图片文件名确实和导入路径里的padlock.png拼写、大小写完全一致。

确认Metro配置支持png资源解析：打开项目根目录的metro.config.js文件，检查resolver.assetExts配置项中是否包含png，默认配置会自带该格式，如果你手动修改过配置可以按以下示例补充：

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

const config = {
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'png'],
  },
};

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

静态资源不要使用uri写法导入：你尝试的{ uri: "../assets/padlock.png" }是用于加载网络图片、安卓/ios原生目录下本地资源的写法，项目内的静态资源直接用require即可，正确用法如下：
```
// 导入资源
const imageLock = require("../assets/padlock.png");
// 组件中使用
<Image source={imageLock} style={{ width: 50, height: 50 }} />
```