不变性违规:requireNativeComponent:“RNSVGSvgViewAndroid”在UIManager中找不到。

17

我在使用 react-native-gifted-charts (https://www.npmjs.com/package/react-native-gifted-charts/v/1.0.3) 时遇到了标题中提到的错误,导致头痛不已。 图表在 iOS 上运行得非常完美,但在 Android 上却一直崩溃并抛出“Invariant Violation:requireNativeComponent:“RNSVGSvgViewAndroid”在UIManager中找不到。”的错误信息。 起初我以为这是我的代码问题,因为之前它在 Android 上是可以运行的,但即使我颠倒代码也无济于事,错误仍然存在。 我使用 yarn 作为包管理器,并使用 Expo Managed Workflow。 依赖关系如下:

"react-native": "0.70.5",
"react-native-gifted-charts": "^1.2.42",
"react-native-linear-gradient": "2.6.2",
"react-native-svg": "12.1.0",

■我尝试过的事情

  1. 我删除了节点模块并再次运行了yarn ← 没有起作用
  2. 根据下面的文章,我改变了react-native-svg的版本,因为有时候这种错误是由于版本不匹配引起的。← 没有起作用 https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/263
  3. 我删除了react-native-gifted-charts、react-native-linear-gradient、react-native-svg,并使用yarn重新添加,看看是否解决了问题。← 没有起作用
  4. 最后,为了确认我的代码不是问题的原因,我删除了所有的代码,并制作了一个简单的barChart示例,看看它是否有效(下面是示例代码)。← 没有起作用
import React, { useState } from "react";
import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from "react-native";
import type { NativeStackScreenProps } from "@react-navigation/native-stack";
import { MainStackParamList } from "../types/navigation";
import dayjs from "dayjs";
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
import { useSelector } from "react-redux";
import { RootState } from "../store";

export const StatisticsScreen: React.FC<Props> = () => {
  const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
  return (
    <BarChart
      data={data}
    />
  );
};

顺便说一句,我也运行了 yarn cache clean,希望清理缓存能解决问题,但没有起到作用...


注意:react-native-gifted-charts 包含非 Expo SDK 的本地代码,因此不会内置于 Expo Go 中。当 Gifted Charts 的 JavaScript 部分尝试访问本地代码时,由于缺失而失败。您需要创建一个开发构建并使用它来代替 Expo Go。 - Wodin
9个回答

47

我也遇到了同样的问题,当尝试使用react-native-heroicons时,需要我安装react-native-svg,但当我运行npx expo install react-native-svg时,它成功了。


这种方法对我有效,谢谢! - anti-duhring
当运行 expo start 时,Expo 会通知您需要安装特定版本。就像这样 Your project may not work correctly until you install the correct versions of the packages. Install individual packages by running npx expo install react-native-svg@13.4.0 - rokob
没错!使用 npx expo install react-native-svg 就能解决问题,而 npm i 则会报错。 - Rohit Parte
1
对我来说不起作用,可能最近有些变化了 /: - John Miller
1
对我来说不起作用,可能最近有些变化了 /: - undefined
你们还在遇到这个问题吗?最近发布了 react-native-gifted-charts 的新版本,将 svg 列为对等依赖而不是直接依赖。请尝试使用最新版本的库,希望这个问题已经解决了。 - undefined

15

我使用 "react-native-svg": "13.6.0" 时出现了错误,降级到 "react-native-svg": "13.4.0" 后问题得以解决。

所以,您可以尝试升级到 13.4.0 版本?


我遇到了同样的问题,将版本更改为13.4.0在开发构建中起作用,但问题是expo doctor报错说"react-native-svg"需要13.9.0版本。有解决方案吗? - Kazim Homayee
@KazimHomayee,我觉得这是不可能的,expo-doctor似乎没有任何配置。而且,已经过去了一年,也许react-native-svg版本13.13.0没有这个问题,你试过了吗? - Nikita Chernenko
刚刚尝试了13.13.0版本,但是 expo-doctor 仍然提示它不兼容,并且需要13.9.0版本,而这个版本无法使用。 - Kazim Homayee

7

Expo可以与react-native-svg的13.4.0版本一起使用,但是react-native-gifted-charts需要13.6.0版本。因此,我使用expo install安装了react-native-svg并通过添加覆盖嵌套依赖项来使用13.4.0版本。

  "resolutions": {
    "react-native-svg": "13.4.0"
  } 

将代码添加至我的package.json中,问题解决。


是的,13.6.0 在 Android 上无法使用。 - Michel Floyd
对我来说没有起作用 - John Miller
@Nemanja Pavlović 嘿,你能发一下你的package.json吗?这个对我来说不起作用。 - Erick Adam
@ErickAdam 它看起来像这样:{ ... "dependencies": { ... "expo": "^47.0.0", "react-native": "0.71.3", "react-native-gifted-charts": "^1.2.42", "react-native-svg": "13.4.0", ... }, "resolutions": { "react-native-svg": "13.4.0" } } - Nemanja Pavlović
@NemanjaPavlović 你在使用 Expo Dev 客户端吗? - Erick Adam
显示剩余3条评论

2
Expo在使用npx expo install [dependency]时,幕后使用yarn,这有点尴尬,因为它们的初始化脚本(即npx create-expo-app my-app)使用npm安装软件包依赖项。

因此,如果您使用

npx expo install react-native-svg

安装 react-native-svg 包时,请确保删除您的 package-lock.json 文件,然后运行命令:

yarn install

所以你的项目中不要有多个包管理器(这可能会对你的依赖关系造成混乱)。


0

这是因为最新的库版本内部使用了

"react-native-svg": "13.6.0"

请查看commit

因此,即使我们安装了不同版本的

"react-native-svg"

它仍然使用版本“13.6.0”,目前在Android上无法正常工作。对我来说,降级到

"react-native-gifted-charts": "1.2.41"

可以解决问题。


0
npx expo install react-native-svg

使用fontawesome 6 pro对我有效果, 但是我的react-native-svg版本是13.6.0,

npx expo install

修复到版本13.4.0


0

安装这个版本。npx expo install react-native-svg@13.4.0


1
你的答案可以通过添加额外的支持信息来改进。请[编辑]以添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是否正确。您可以在帮助中心找到有关如何撰写良好答案的更多信息。 - Community

0
我在我的安卓设备上使用Expo。通过扫描二维码来运行应用程序。
我遇到了一个错误 ->
Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager

因为我使用的是"react-native-svg": "13.6.0"版本, 如果你想解决这个错误,你需要降低版本。
npx expo install react-native-svg@13.4.0`

请在这里检查package.json文件。

https://github.com/berkaynayman/e-commerce-mobile-app


你使用的是哪个版本的 Expo 和 react-native-gifted-charts?另外,你是否在使用 Expo dev-client? - Erick Adam
嗨埃里克,我编辑了我的回答。 - Berkay Nayman

-1

SVG 渲染需要此模块

npm install react-native-svg-transformer --save 

谢谢您的建议!我运行了您推荐的命令,现在错误信息变成了“java.lang.Double无法转换为com.facebook.react.bridge.ReadableMap”,这让我想起了我最初遇到的第一个错误。我检查了GitHub上的这个问题,希望匹配react-native-svg和react-native-linear-gradient的版本可以解决问题,但是它没有...。 https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/263 - peruvian66
您不需要此项来使用 RN Gifted Charts。 - Wodin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接