React Native加载assets目录静态图片报错无法解析模块如何解决

错误原因翻译 #

错误：无法从路径 D:\munish\Desktop\Invictus\reach-app\src\reactNativeCamera.js 解析模块 ../assets/images/potrait.png，以下文件均不存在：

1. potrait.png
2. 路径 assets\images\potrait.png\ 下后缀为(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)的index入口文件

解决方案 #

• 先核对文件名拼写，你标注的文件名为potrait.png，确认是不是实际文件名误写为portrait.png（多了字母r，是这类问题的高频出错点）
• 核对引用文件的路径层级，如果你是在src/reactNativeCamera.js中写的引用，../assets/images/potrait.png的相对路径是正确的；如果是在src的子级目录文件中写的引用，需要对应增加层级，比如src/components/xxx.js里要写../../assets/images/potrait.png
• 重置React Native打包缓存，执行对应命令：
  原生RN项目执行：

  npx react-native start --reset-cache
  

  Expo项目执行：

  npx expo start --clear
  

• 检查项目根目录的metro.config.js配置，确认resolver.assetExts数组中包含png后缀，示例正确配置参考：

  module.exports = {
    resolver: {
      assetExts: ['png', 'jpg', 'jpeg', 'gif', 'webp']
    }
  }
  

• 安卓端出现该问题时，额外检查android/app/build.gradle中是否配置了资源目录包含assets文件夹

内容的提问来源于stack exchange，提问作者Munish Vira