React Native中无法访问src/assets子目录下的资源文件求助

看起来你已经确认了拼写没问题，那咱们从几个常见的排查方向入手：

1. 先确认App.js的实际位置 #

这是最容易踩坑的细节：

• 如果你的App.js还在项目根目录（AwesomeProject/App.js），那你写的./src/assets/icon/home-active.png路径是正确的。
• 但如果重构时你把App.js也移到了src文件夹里（AwesomeProject/src/App.js），那相对路径就多了一层src/，应该改成：

  <Image style={{ width: 26, height: 26 }} source={require('./assets/icon/home-active.png')} />
  

2. 清除React Native的缓存 #

Metro的缓存经常会导致资源路径变更后无法识别，执行以下命令彻底清除缓存：

• 通用重置缓存命令：

  npx react-native start --reset-cache
  

• 额外清理iOS缓存（可选）：

  cd ios && pod install && cd ..
  rm -rf ~/Library/Developer/Xcode/DerivedData
  

• 额外清理Android缓存（可选）：

  cd android && ./gradlew clean && cd ..
  

3. 检查文件名大小写（重点关注iOS平台） #

iOS系统对文件名大小写是严格敏感的，比如Home-Active.png和home-active.png会被识别成两个完全不同的文件。哪怕你本地文件名是小写，也要确认引用时的大小写和实际文件完全一致。

4. 配置Metro资源扫描路径（如果需要） #

如果你的src/assets目录没有被Metro默认扫描到，可以修改项目根目录的metro.config.js，添加资源路径配置：

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: ['png', 'jpg', 'jpeg', 'gif'], // 确保包含你的图标格式
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx'],
  },
  watchFolders: [
    `${__dirname}/src/assets`, // 将资源目录加入Metro监听列表
  ],
});

修改完配置后，记得重启Metro服务并重新清除缓存。

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