react-native加载图片失败，Android Studio提示查找index文件报错如何解决？

为什么会尝试查找index类文件 #

报错中出现index类文件的查找逻辑是Metro（React Native默认打包器）的默认行为：当你传入require的路径没有匹配到对应文件时，Metro会自动将该路径视为目录，尝试加载目录下的index后缀的所有支持格式文件，并非系统逻辑异常。

额外提示：报错里出现的.anroid.js属于React Native官方报错的拼写笔误，无需特殊处理。

排查解决步骤 #

• 核对文件路径与拼写
  首先确认require("../../assets/images/motor_scooter.png")的路径和实际文件位置完全匹配：
  1. 计算当前编写组件的文件与图片的相对路径：向上跳转两级目录后，是否确实存在assets/images/motor_scooter.png文件
  2. 检查文件名、后缀名的大小写是否完全一致，Android文件系统大小写敏感，例如实际文件为Motor_Scooter.PNG时，写小写路径会识别失败
  3. 确认图片文件没有被.gitignore/.npmignore等规则排除，确实存在于项目本地目录中
• 检查Metro配置的资源支持列表
  打开项目根目录的metro.config.js，检查resolver.assetExts配置项是否包含png后缀，缺失的话手动添加即可，参考配置：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  const config = {
    resolver: {
      // 保留默认支持的资源格式，额外补充你需要的格式
      assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'png', 'jpg', 'jpeg', 'gif'],
    },
  };
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

• 清理缓存重启服务
  Metro缓存异常也会导致已存在的资源识别失败，执行以下命令重置缓存重新打包即可：

  # 停止现有Metro服务后执行
  npx react-native start --reset-cache
  # 新开终端重新构建安卓应用
  npx react-native run-android
  

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