问题标签 [react-native-svg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
598 浏览

react-native - 是否有用于绘制实时时间序列数据折线图的 React-native 包?

我尝试过使用 react-native-svg-charts、react-native-highcharts 但没有帮助。我无法绘制数据点、移动轴(根据时间)和标记轴。

我的数据是这样的: 1: {value: 119.6932, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 2: {value: 119.9372, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 3: {value: 120.2093, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 4: {value: 122.9826, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 5: {value: 114.2904, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}

以上是使用 react-native-svg-charts 实现的,在这里我能够以某种方式根据实时时间移动 x 轴(时间),但它不正确。有没有好的格式建议?谢谢

0 投票
1 回答
1734 浏览

react-native - EXPO react-native-svg错误:-“更新由RNSVGPath null管理的视图的属性'd'时出错。对于输入字符串:“c”

react-native-svg 和 android 似乎存在问题。此错误仅在我的Android应用程序中引发 - iOS 应用程序似乎没问题?错误消息没有告诉我错误可能发生在哪里。任何想法都会有所帮助...

代码:


"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz", "react-native-svg": "9.5.3", "react-native-svg-charts": "^5.3.0",

在此处输入图像描述

更新:

认为已经找到了错误的根源。里面node_modules>react-native-svg>elements>Path.js>Path>render有一个道具“d”的要求——上面写着:

0 投票
1 回答
2204 浏览

reactjs - 如何将 SVG/d3 地图添加到 React Native?

用例

我想创建一个 React Native 应用程序,该应用程序在具有特殊地图投影的世界地图上显示存储在 PostGIS 数据库中的坐标。

到目前为止我做了什么

我成功地将地图加载到我的 Web 版本应用程序的 React 环境中。这是我实现的代码(仅包括保存地图的组件):

这是上面代码的结果映射:

在此处输入图像描述

我还研究了如何实现 SVG 形状,甚至映射到 React Native,并遇到了几种方法:

问题

但是,我无法使用这些解决方案实现任何地图。上面列表中的前两个没有提到任何地图实现,而后一个似乎是一个非常早期的 beta 版本。所以我想知道这在 React Native 中是否可行。有人知道在 React Native 中插入 SVG 地图的方法吗?

0 投票
2 回答
1076 浏览

react-native - onPress 无法使用 react-native-svg 在 iOS 上处理 SVG 路径

当我在如下所示的弧线上按任意位置时,在 Android 上,onPress 始终会被正确调用,但在 iOS 上,有时会调用 onPress,但有时不会。弧线的某些部分在 iOS 上是不可点击的。

此外,没有任何定位元素(绝对/相对定位)与弧重叠。

这是我的代码。

在此处输入图像描述

我还在 react-native-svg 包中记录了一个问题:https ://github.com/react-native-community/react-native-svg/issues/1256

0 投票
0 回答
361 浏览

typescript - 如何修复 TypeError: undefined is not an object (evalating '_config.Svg.G')

我在我正在处理的一个 expo react 本机项目中遇到了这个错误。我已经更新了所有包以匹配 expo SDK 36,所以我不确定错误来自哪里。

0 投票
1 回答
277 浏览

react-native - React Native SVG 无处不在,有意义吗?

我们正在考虑react-native-svg在我们的应用程序中使用。我们有点想在应用程序周围自由地使用它来创建几乎每个页面的视觉效果,因为它应该比使用图像更好地扩展。我们的目标是 Android 和 iOS、平板电脑和手机。

react-native-svg在应用程序周围大量使用 SVG而不是使用 PNG 图像是否有意义?

0 投票
1 回答
1274 浏览

javascript - 未找到 react-native-svg ForeignObject 元素(React-Native + Expo + TypeScript)

我有一个用 Expo 创建的 React Native 项目。我还使用了 expo TypeScript 配置。

我使用“expo install”安装了react-native-svg 。我目前安装了 9.13.3 版。

每当我尝试使用 react-native-svg 渲染 SVG 时,都会出现此错误。

我查看了节点模块的 src 文件,找不到 ForeignObject 元素的任何文件。


错误:


这是我的组件声明 - Star.tsx:

我不确定问题是什么,除了它可能与 TypeScript 配置有关。我在 JavaScript react-native 项目中创建了相同的图标,它运行良好。

如果有人知道我为什么会收到此错误或可以提供任何帮助,我将不胜感激!

谢谢。

0 投票
3 回答
8543 浏览

javascript - 如何在 react-native-reanimated 中聆听价值变化?

我用Animatedfrom react-nativewith创建了一个简单的动画react-native-svg

这很好地完成了工作,

但是现在我改用了,react-native-reanimated因为我在他们的网站上看到 reanimated 比Animatedfrom更快react-native

但是在这里我遇到了一个问题,那就是我找不到addListener监听值变化的函​​数。

带有Animatedfrom 的代码react-native

我怎样才能实现上述addListener功能 react-native-reanimated

0 投票
1 回答
4741 浏览

reactjs - React Native SVG - 设置 SVG 宽度和高度会导致图标被切断

我有一个 SVG 组件,我正在尝试传递宽度和高度道具,以便根据显示将所有图标缩放到相同的大小。

当我将 41 和 41 作为道具传递时,这会导致绘图本身被切断。

在此处输入图像描述

我不太了解 SVG 的工作原理,我该如何解决?

0 投票
1 回答
3119 浏览

react-native - 使用 react-native-svg 时执行 UI 块时引发异常

我的应用突然开始崩溃并给了我这个错误:

一段时间后,我能够隔离产生错误的部分,并发现它与从 react-native-svg 导入的 Svg 组件有关。
我尝试删除并重新安装 node_modules 并尝试重置缓存,甚至尝试从头开始创建一个新的 expo 应用程序,该应用程序除了渲染 Svg 组件之外什么都不做,但问题仍然存在。

在android上,我收到一条不同的错误消息:

这是我的代码的样子:

错误截图