React-Native升级至0.59后Metro Bundler无法加载资源及文件问题

结合你描述的情况，这个问题主要源于Metro版本冲突和Metro配置未适配新的项目结构，咱们一步步来解决：

1. 先清理Metro版本冲突 #

你当前项目里存在多余的metro@0.48.5，和React Native 0.59依赖的metro@0.51.1版本冲突，这会直接导致Metro运行异常：

• 卸载多余的Metro包：

  npm uninstall metro --save
  # 用yarn的话执行：
  yarn remove metro
  

• 重新安装依赖，确保版本完全一致：

  rm -rf node_modules package-lock.json yarn.lock
  npm install
  # 或者
  yarn install
  

• 验证版本：执行npm ls metro，确保输出里只有metro@0.51.1，没有其他冗余版本。

2. 调整Metro配置文件（metro.config.js） #

你的Metro配置没有正确覆盖项目的目录结构，导致资源路径解析错位。修改后的配置如下：

const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = { 
  // 让Metro监控所有需要的目录：项目根、node_modules、artifacts、src
  watchFolders: [
    path.join(__dirname),
    path.join(__dirname, 'node_modules'),
    path.join(__dirname, 'artifacts'),
    path.join(__dirname, 'src')
  ], 
  transformer: { 
    getTransformOptions: async () => ({ 
      transform: { 
        experimentalImportSupport: false, 
        inlineRequires: false 
      } 
    }) 
  }, 
  resolver: { 
    blacklistRE: blacklist([ /node_modules\/.*\/node_modules\/react-native\/.*/]), 
    assetRegistryPath: path.resolve('node_modules/react-native/Libraries/Image/AssetRegistry'),
    // 指定Metro搜索文件的根目录，确保能找到artifacts和node_modules里的资源
    rootDirs: [path.resolve(__dirname), path.resolve(__dirname, 'artifacts')],
    // 确保包含所有你的资源后缀，避免漏解析
    assetExts: ['png', 'jpg', 'jpeg', 'gif', 'svg'],
    // 如果my-assets是本地依赖，添加路径映射确保Metro能定位到它的资源
    extraNodeModules: {
      'my-assets': path.resolve(__dirname, 'node_modules/my-assets')
    }
  } 
}

3. 彻底清除缓存并重新构建 #

之前的缓存清除可能不彻底，执行以下步骤确保干净：

• 清除Watchman缓存：

  watchman watch-del-all
  

• 删除Metro临时文件：

  rm -rf $TMPDIR/metro-*
  rm -rf $TMPDIR/haste-map-*
  

• 删除artifacts目录，重新转译TS代码：

  rm -rf artifacts
  # 执行你的TS转译命令，比如：
  tsc
  

• 重新启动Metro，建议先不指定--projectRoot artifacts，让Metro自动识别项目根：

  node node_modules/react-native/local-cli/cli.js start --reset-cache
  

  如果必须指定projectRoot，改为指向当前项目根目录：

  node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot .
  

  这样Metro既能找到artifacts里的JS代码，也能正确解析其他目录的资源。

4. 检查资源导入路径 #

确保你的TS代码里资源导入路径是相对路径，转译后的JS文件路径没有出错。比如：

// 正确的相对路径导入
import Logo from './assets/images/Logo.png';
// 或者使用require
const Logo = require('./assets/images/Logo.png');

避免使用绝对路径，确保转译后路径相对于artifacts目录是有效的。

按照这些步骤操作后，Metro应该能正确解析资源路径，不会再返回404了。

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