React Native项目RNSVGSvgView组件找不到错误求助

开发React Native项目时，引入@rainbow-me/animated-charts和react-native-wagmi-charts均触发错误：
Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager

相关配置信息 #

package.json #

{
  "name": "tradingbot",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@rainbow-me/animated-charts": "^1.0.0-alpha.6",
    "axios": "^1.5.1",
    "expo": "^49.0.3",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-linear-gradient": "^12.5.0",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-dotenv": "^3.4.9",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "^12.5.1",
    "react-native-wagmi-charts": "^2.3.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9"
  },
  "resolutions": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7"
  },
  "overrides": {
    "metro": "^0.73.7",
    "metro-resolver": "^0.73.7",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0"
  },
  "private": true
}

npm why react-native-svg 输出 #

react-native-svg@12.5.1
node_modules/react-native-svg
  react-native-svg@"^12.5.1" from the root project
  react-native-svg@"^12.1.0" from @rainbow-me/animated-charts@1.0.0-alpha.6
  node_modules/@rainbow-me/animated-charts
    @rainbow-me/animated-charts@"^1.0.0-alpha.6" from the root project
  peer react-native-svg@"*" from react-native-wagmi-charts@2.3.0
  node_modules/react-native-wagmi-charts
    react-native-wagmi-charts@"^2.3.0" from the root project

babel.config.js #

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      '@babel/plugin-proposal-export-namespace-from',
      require.resolve('expo-router/babel'),
      'react-native-reanimated/plugin',
    ],
  }
}

解决思路 #

1. 匹配react-native-svg与Expo SDK版本 #

你当前使用的react-native-svg@12.5.1与Expo 49（对应RN 0.72.3）不兼容，官方推荐版本为13.9.0：

• 执行命令安装适配版本：expo install react-native-svg（自动匹配SDK对应版本）
• 或手动指定：npm install react-native-svg@13.9.0

2. 彻底清除缓存并重启项目 #

缓存异常是原生组件注册失败的常见原因：

• 清除npm缓存：npm cache clean --force
• 清除Expo项目缓存并重启：expo r -c
• 极端情况可删除依赖文件重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

3. 配置Metro支持SVG资源 #

确保Metro配置中包含SVG扩展名（若没有metro.config.js则新建）：

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('svg');
module.exports = config;

4. 强制统一react-native-svg版本 #

避免依赖冲突，在package.json的overrides中添加：

"overrides": {
  // 保留原有配置
  "react-native-svg": "13.9.0"
}

添加后重新执行npm install，确保所有依赖库使用同一版本的react-native-svg。

5. 验证基础SVG组件是否正常 #

创建最小化测试组件，排查问题是否出在react-native-svg本身：

import Svg, { Circle } from 'react-native-svg';

export default function TestSvg() {
  return (
    <Svg height="100" width="100">
      <Circle cx="50" cy="50" r="40" stroke="blue" strokeWidth="2" fill="white" />
    </Svg>
  );
}

若该组件报错，说明问题在react-native-svg的安装或配置；若正常，再逐步引入图表库排查。

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