React Native如何重置.png-cache缓存解决资源加载报错问题

这个报错是Metro（React Native默认打包工具）的静态资源映射缓存损坏导致的：Metro处理本地静态资源时，会给每个资源生成带哈希值的路径映射记录，当缓存记录错位、或者之前生成的缓存文件意外丢失时，就会错误把svg等格式资源的引用路径指向.png-cache目录下不存在的旧png缓存文件，触发资源找不到的报错。
你之前重命名单个文件能正常加载，本质是修改文件名后Metro会将其识别为全新资源，跳过旧缓存重新生成路径映射，不需要逐个重命名文件，全量清理缓存就能批量解决所有资源的映射异常问题。

按顺序执行以下操作即可清除所有失效缓存，重新生成正确的资源映射：

• 清理Metro全局与本地缓存
  在项目根目录执行对应系统的命令：

  # Mac/Linux系统执行
  rm -rf node_modules/.cache
  rm -rf $TMPDIR/metro-*
  rm -rf $TMPDIR/haste-map-*
  

  # Windows系统执行（PowerShell窗口）
  Remove-Item -Recurse -Force node_modules/.cache
  Remove-Item -Recurse -Force $env:TEMP\metro-*
  Remove-Item -Recurse -Force $env:TEMP\haste-map-*
  

• 清理安卓端构建缓存
  进入项目下的android目录执行清理命令：

  # Mac/Linux系统执行
  cd android && ./gradlew clean
  

  # Windows系统执行
  cd android
  .\gradlew.bat clean
  

• 带缓存重置参数启动服务
  回到项目根目录，不要用普通的启动命令，加上重置缓存参数启动Metro服务：

  npx react-native start --reset-cache
  

  等Metro服务完全启动后，新开一个终端窗口，在项目根目录执行npx react-native run-android重新打包安装应用即可。

• 不要手动修改、删除assets目录下自动生成的.png-cache文件夹，这个目录是Metro处理矢量图资源时自动生成的缓存目录，手动删除很容易导致路径映射错位，触发同类报错。
• 如果执行完上述操作仍有个别资源报错，检查项目根目录下的metro.config.js配置，确认svg格式资源没有被错误匹配到png资源的解析规则中。
• 不要用动态拼接路径的方式写require引用，Metro在打包阶段做静态分析时无法识别动态路径，会直接导致资源打包失败。

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