首页 > 编程问答 >由于 react native svg 图表的依赖性问题,无法在 expo 上构建我的应用程序

由于 react native svg 图表的依赖性问题,无法在 expo 上构建我的应用程序

时间:2024-06-17 14:08:54浏览次数:13  
标签:react-native expo react-native-svg react-native-svg-charts

我最近制作了一个应用程序,并尝试为 TestFlight 构建该应用程序。

在我的应用程序中,我开始使用 react-native-svg-charts 它使用 react-native-svg.

这些是我的 package.json 中的版本: "react-native-svg":"^15.3.0"、 "react-native-svg-charts": "^5.4.0"、 "react-native-chart-kit":"^6.12.0",

当我执行 npx expo start 时,我可以看到应用程序正在运行,而且一切正常: eas build --platform iOS

然后构建失败,因为:

在 /Users/expo/workingdir/build 目录中运行 "npm install"。
npm
代码 ERESOLVE
npm ERR!
无法解决
npm ERR!
npm
ERR!正在解析: [email protected]
npm ERR!找到: [email protected]
npm ERR!
npm ERR! root 项目中的 react-native-svg@"^15.3.0"
npm ERR! peer react-native-svg@"> 6.4.1" from [email protected]
npm ERR!
npm ERR!react-native-chart-kit@"^6.12.0"来自根项目
npm ERR!   多 1 个 (react-native-gifted-charts)
npm ERR!
npm ERR!无法解析依赖关系:
npm ERR! peer react-native-svg@"^6.2.1||^7.0.3" from [email protected]
npm ERR!
npm ERR! react-native-svg-charts@"^5.4.0" 源自根项目
npm ERR!
npm ERR!冲突的对等依赖关系:[email protected]
npm
ERR! node_modules/react-native-svg
npm ERR! peer react-native-svg@"^6.2.1||^7.0.3" from [email protected]
npm ERR!
npm ERR! react-native-svg-charts@"^5.4.0" 源自根项目
npm ERR!
npm ERR!修复上游依赖关系冲突,或重试
npm ERR!
npm ERR! 接受不正确的(可能已损坏的)依赖关系解析。
npm ERR!
npm ERR!
npm ERR!有关完整报告,请参阅
npm ERR!/Users/expo/.npm/_logs/2024-06-16T18_10_33_225Z-eresolve-report.txt
npm ERR!此运行的完整日志可在/Users/expo/.npm/_logs/2024-06-16T18_10_33_225Z-debug-0.log
npm install 以非零代码退出:1

当我执行 npm install 时,我得到:

npm ERR!
npm ERR!无法解决
npm ERR!
npm ERR!正在解析:[email protected]
npm ERR!找到: [email protected]
npm ERR!
npm ERR! root 项目中的 react-native-svg@"^15.3.0"
npm ERR! peer react-native-svg@"> 6.4.1" from [email protected]
npm ERR!
npm ERR!react-native-chart-kit@"^6.12.0"来自根项目
npm ERR!   多 1 个 (react-native-gifted-charts)
npm ERR!
npm ERR!无法解析依赖关系:
npm ERR! peer react-native-svg@"^6.2.1||^7.0.3" from [email protected]
npm ERR!
npm ERR! react-native-svg-charts@"^5.4.0" 源自根项目
npm ERR!
npm ERR!冲突的对等依赖关系:[email protected]
npm ERR!
npm ERR! peer react-native-svg@"^6.2.1||^7.0.3" from [email protected]
npm ERR!
npm ERR! react-native-svg-charts@"^5.4.0" 源自根项目
npm ERR!
npm ERR!修复上游依赖关系冲突,或重试
npm ERR!
npm ERR! 接受不正确的(可能已损坏的)依赖关系解析。
npm ERR!
npm ERR!
npm ERR!有关完整报告,请参阅
npm ERR!/Users/niloufar/.npm/_logs/2024-06-16T18_14_27_517Z-eresolve-report.txt

npm ERR!本次运行的完整日志可在以下位置找到:/Users/niloufar/.npm/_logs/2024-06-16T18_14_27_517Z-debug-0.log

因此,如果我这样做,就会出现一些依赖性问题: npm uninstall react-native-svg

npm i [email protected]

然后我就可以进行 npm 安装了,但是当我进行 npx expo start 时,我得到的结果是:

Invariant Violation: "main" has not been registered.这种情况可能发生在以下情况* 从错误的文件夹运行 Metro(本地开发服务器)。检查 Metro 是否正在运行,停止它并在当前项目中重新启动。* 由于错误导致模块加载失败,且未调用 `AppRegistry.registerComponent`。

我没有主意了,我不知道该怎么办,无论我做什么都会出错。 我需要不使用 react-native-svg-charts 吗? 请帮助我。


看来你的问题是由于项目中不同软件包的 react-native-svg 版本不一致造成的。以下是如何解决此问题的方法:

理解问题:

  • 对等依赖关系: react-native-svg-charts react-native-chart-kit 都依赖于 react-native-svg ,但它们需要不同的版本。
  • 版本不匹配: react-native-chart-kit 需要 react-native-svg 版本 > 6.4.1 ,而 react-native-svg-charts 需要版本 ^6.2.1||^7.0.3 。你当前的 react-native-svg 版本 15.3.0 满足了 react-native-chart-kit 的要求,但不满足 react-native-svg-charts 的要求。

解决方案:

目标是找到一个与所有三个软件包兼容的 react-native-svg 版本。由于 react-native-svg-charts 支持 react-native-svg 版本 7,让我们尝试一下:

  1. 安装依赖项:

bash npm install [email protected] [email protected] [email protected] 这将安装所有三个软件包及其特定版本。

  1. 清除缓存并重新启动:

有时,npm 或 yarn 缓存可能会导致问题。清除缓存并重新启动你的开发服务器:

bash npx react-native start --reset-cache

  1. 验证安装:

安装完成后,请检查 package.json 文件,确保所有软件包都已更新为正确的版本: json "dependencies": { "react-native-svg": "7.2.1", "react-native-svg-charts": "5.4.0", "react-native-chart-kit": "6.12.0", ... }

  1. 如果问题仍然存在:
  2. 检查 react-native-gifted-charts (在你的错误日志中提到)是否也依赖于 react-native-svg ,如果是,请尝试找到一个与其兼容的版本。
  3. 作为最后的手段,你可能需要考虑使用其他图表库,或者在没有版本冲突的情况下手动解决依赖关系问题。

其他建议:

  • 始终密切关注你的依赖关系,并尝试使用兼容的版本。
  • 使用 npm 或 yarn 的版本锁定功能(如 package-lock.json yarn.lock )来防止意外的版本更新。

希望这些步骤能帮助你解决问题!如果仍然遇到问题,请提供更多上下文信息,例如你的 package.json 文件的完整内容和任何其他错误消息,以便我提供更具体的帮助。

标签:react-native,expo,react-native-svg,react-native-svg-charts
From: 78629896

相关文章

  • prometheus的进程监控process-exporter
    1.下载二进制文件process-exporter项目地址:https://github.com/ncabatoff/process-exporter下载地址:https://github.com/ncabatoff/process-exporter/releases/download/2.启动#解压tar-zxvfprocess-exporter-0.8.2.linux-amd64.tar.gzmkdir/usr/local/node_exporter/......
  • CV_WRAP和CV_EXPORTS_W
    CV_EXPORTS_Wisdefinedinmodules/core/include/opencv2/core/types_c.hasaliasforCV_EXPORTS,CV_EXPORTSisdefinedas:#if(definedWIN32||defined_WIN32||definedWINCE)&&definedCVAPI_EXPORTS#defineCV_EXPORTS__declspec(dllexport)#el......
  • Nexpose v6.6.255 for Linux & Windows - 漏洞扫描
    Nexposev6.6.255forLinux&Windows-漏洞扫描Rapid7VulnerabilityManagement,releaseJun05,2024请访问原文链接:https://sysin.org/blog/nexpose-6/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org您的本地漏洞扫描程序搜集通过实时覆盖整个网络,随......
  • 【CMake系列】07-export与find
    为了将我们的库文件更方便地提供给他人使用,cmake提供了一种方式,通过查找.cmake文件,将库导入项目中。本节学习的内容,就是将我们的库导出一个xxx.cmake文件,以及在项目中导入本专栏的实践代码全部放在github上,欢迎star!!!如有问题,欢迎留言、或加群【392784757】交流x......
  • vue3 dom ref 实现,子组件ref实现,defineExpose暴露子组件作用域
    示例代码App.vue<template><header><imgalt="Vuelogo"class="logo"src="@/assets/logo.svg"width="125"height="125"/><divclass="wrapper"><HelloWorld......
  • 【30天精通Prometheus:一站式监控实战指南】第16天:snmp_exporter从入门到实战:安装、配
    亲爱的读者们......
  • Spring - AOP - @EnableAspectAutoJAutoProxy 与其属性exposeProxy,proxyTargetClass
    这三个属性是Spring框架中与AOP(面向切面编程)相关的配置。 EnableAspectJAutoProxy:这是一个注解,用于开启Spring对AspectJ的自动代理功能。  exposeProxy:这个属性用于配置是否需要将代理对象暴露给AOP创建的Subject,这样就可以在代理对象内部通过AopContext.currentProxy......
  • 透过 node-exporter 彻底弄懂机器监控:01. node-exporter 框架讲解
    前言Prometheus生态里有很多采集器负责各类监控数据的采集,其中使用最广泛的,显然是node-exporter,负责Linux、BSD等系统的常规监控指标的采集,比如CPU、内存、硬盘、网络、IO等。其github地址是:https://github.com/prometheus/node_exporter 。很多人都用过,但对其细节未必......
  • django import_export 可视化导入导出外键字段
    在Django中使用django-import-export库进行外键关系的数据导入时,可以通过自定义资源类来处理外键字段的解析和保存。这样可以使导入过程更加直观和有效。我们将展示如何配置和使用django-import-export库,以便在导入数据时正确处理外键关系并将其从可读形式(如名称)转换为模型......
  • 彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
    前言众所周知,当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注:本文中使用的vue......