react-native-svg解析失败 | 使用victory-native遇打包错误求助

嘿，我之前也碰到过victory-native找不到react-native-svg的问题，大概率是链接不彻底、缓存干扰或者版本兼容的锅，试试下面这些办法：

1. 先确认react-native-svg的安装与链接状态 #

自动link有时候会没生效，尤其是iOS或者RN 0.60+的autolinking场景：

• iOS端操作：
  • 进入项目的ios目录，执行 pod install，确保react-native-svg的Pod被正确拉取安装
  • 打开Xcode项目，检查Linked Frameworks and Libraries里有没有RNSVG.xcframework，没有的话手动添加
• Android端操作：
  • 打开android/app/build.gradle，检查dependencies里是否有 implementation project(':react-native-svg')
  • 打开android/settings.gradle，确认包含这段配置：

    include ':react-native-svg'
    project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
    

  • 如果是RN 0.60+版本，确保autolinking功能正常（不需要手动执行react-native link）

2. 清缓存！清缓存！清缓存！ #

缓存是模块解析问题的重灾区，执行以下命令彻底清理：

• 重启Metro并重置缓存：npx react-native start --reset-cache
• 彻底清理依赖缓存：

  rm -rf node_modules
  rm package-lock.json # 用yarn的话就删 yarn.lock
  npm install # 或者 yarn install
  

• 最后重启模拟器/真机，重新运行项目

3. 检查版本兼容性 #

victory-native和react-native-svg有严格的版本匹配要求，装错版本肯定出问题：

• 可以查看victory-native的peer依赖要求，执行命令：npm view victory-native peerDependencies
• 比如RN 0.68+版本，建议安装react-native-svg@12.x及以上版本，不要装太老的版本

4. 手动指定模块解析路径（临时救急方案） #

如果上面的方法都不行，可以在metro.config.js里手动指定react-native-svg的路径，强制Metro找到它：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const { resolver: { sourceExts, assetExts } } = await getDefaultConfig();
  return {
    resolver: {
      extraNodeModules: {
        'react-native-svg': require.resolve('react-native-svg'),
      },
      sourceExts,
      assetExts,
    },
  };
})();

修改完保存后，重启Metro服务试试

5. 彻底重装依赖 #

如果以上都没用，那就把相关依赖彻底卸载重装：

npm uninstall victory-native react-native-svg
npm install victory-native react-native-svg
# RN <0.60版本需要手动link：react-native link react-native-svg
# RN >=0.60版本的iOS需要执行：cd ios && pod install

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