Invariant Violation:requireNativeComponent:"RNSVGCircle" was not found in the UIManager.
This error is located at:
in RNSVGCircle in Circle
in RNSVGGroup in G
in RNSVGSvgView in Svg
in RCTView in Unknown in RCTView in Unknown inI
in RCTView in Unknown
in RCTScrollContentView in RCTScrollView in w
in ScrollView in RCTView in Unknown in Unknown in Unknown in RCTView in Unknown in RCTView in Unknown
in l,js engine:hermes

您好，遇到 Invariant Violation: requireNativeComponent: "RNSVGCircle" was not found in the UIManager 这个错误，通常意味着 React Native 在原生端（Harmony 或 Harmony）找不到名为 RNSVGCircle 的组件。这个组件是 react-native-svg 库的一部分，用于渲染 SVG 圆形元素。

根据公开资料，这个问题的根源和解决方案主要集中在依赖版本兼容性和原生模块链接上。以下是为您梳理的排查步骤和解决方案。

根本原因分析

该错误的核心原因通常是以下两点之一：

1. 版本不兼容：您项目中安装的 react-native-svg 版本与当前 React Native 版本不兼容。
2. 原生模块未正确链接：React Native 的原生模块（如 react-native-svg）没有被正确地链接到您的 Harmony 或 Harmony 项目中，导致 UIManager 无法找到对应的原生组件。

解决方案

请您按照以下步骤逐一尝试，通常第一步或第二步就能解决问题。

步骤 1：检查并更新 react-native-svg 版本（最常见原因）

根据资料，react-native-svg 的特定版本（如 13.4.0）与较新的 React Native 版本可能存在兼容性问题。建议您升级到更高版本的 react-native-svg。

1. 查看当前版本：在项目根目录下运行 npm ls react-native-svg 或 yarn list react-native-svg 来查看当前安装的版本。
2. 升级版本：运行以下命令将 react-native-svg 升级到最新版本（截至2025年，建议使用 ^15.1.0 或更高）：

   npm install react-native-svg@^15.1.0
   或者使用 yarn
   yarn add react-native-svg@^15.1.0
   

3. 清理缓存并重新构建：升级后，务必清理缓存并重新构建项目。

   npx react-native run-Harmony  或 run-Harmony
   或者更彻底地清理
   npx react-native start --reset-cache
   cd Harmony && ./gradlew clean && cd .. && npx react-native run-Harmony
   

步骤 2：确保原生模块已正确链接

如果升级版本无效，请检查原生模块是否已正确链接。

• 对于 Harmony：

  1. 确保在 Harmony/app/src/main/java/[your-package-name]/MainApplication.java 文件中，getPackages() 方法包含了 SvgPackage()。

     import com.horcrux.svg.SvgPackage; // 确保导入了这个包
     
     @Override
     protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
             new SvgPackage() // 确保这里添加了 SvgPackage
             // 其他包...
         );
     }
     

  2. 如果使用了 react-native link 命令，请确保已执行：npx react-native link react-native-svg。
  3. 如果上述方法无效，可以尝试手动链接：npx react-native link react-native-svg。

• 对于 Harmony：

  1. 确保 react-native-svg 已通过 CocoaPods 安装。进入 Harmony 目录并运行 pod install。
  2. 检查 Harmony/[YourApp].xcodeproj 是否包含了 react-native-svg 的原生项目。

步骤 3：清理项目并重启开发服务器

有时，旧的缓存文件会导致问题。尝试以下操作：

• 删除项目根目录下的 node_modules 文件夹和 package-lock.json（或 yarn.lock）文件。
• 运行 npm install（或 yarn）重新安装依赖。
• 清理 React Native 缓存：npx react-native start --reset-cache。
• 重启开发服务器并重新构建应用。

步骤 4：检查第三方库冲突

如果您使用了像 gluestack-ui 这样的第三方 UI 库，它们可能会对 react-native-svg 的版本有特定要求。 请检查这些库的官方文档，确认其推荐的 react-native-svg 版本，并根据需要调整您的依赖版本。

---

根据错误信息 Invariant Violation: requireNativeComponent: “RNSVGCircle” was not found in the UIManager，这表明 React Native 项目在尝试渲染 SVG 的 Circle 组件时，未能找到对应的原生组件实现。以下是解决方案：

1. ‌检查依赖版本‌

确保 react-native-svg 版本与 React Native 版本兼容。推荐使用最新稳定版本（如 15.0.0）。
在 package.json 中更新依赖：

"dependencies": {
  "react-native-svg": ".0.0",
  "react-native-svg-transformer": ".3.0"
}

运行 npm install 或 yarn install 更新依赖。

2. ‌配置 Metro 转换器‌

在项目根目录创建或更新 metro.config.js，添加 SVG 转换规则：

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();

3. ‌清理缓存并重新构建‌

运行以下命令清理缓存并重新构建项目：

npx react-native start --reset-cache
npx react-native run-android

4. ‌检查原生配置‌

确保在 android/app/src/main/java/[your-package]/MainApplication.java 中正确注册了 SvgPackage：

import com.horcrux.svg.SvgPackage; // 导入 SvgPackage

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new SvgPackage() // 添加 SvgPackage
  );
}

5. ‌验证安装‌

如果问题持续，尝试卸载并重新安装 react-native-svg：

npm uninstall react-native-svg
npm install react-native-svg

6. ‌检查其他依赖冲突‌

确保没有其他库（如 react-native-reanimated）与 react-native-svg 冲突。如果存在，尝试降级或更新相关库版本。

7. ‌调试建议‌

在开发环境中，错误会触发 RedBox 提示框，查看完整堆栈跟踪以定位问题根源。
生产环境需捕获未处理的 Promise 拒绝，避免应用白屏。

通过以上步骤，通常可解决 RNSVGCircle 组件未找到的问题。若仍报错，建议检查 react-native-svg 的 GitHub 仓库，查看是否有类似问题的解决方案。

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。