问题标签 [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 投票
1 回答
2499 浏览

javascript - 如何在 React Native 中为 svg 文件的一部分设置动画

我正在开发一个反应本机应用程序,我需要对 svg 文件的一部分进行动画处理(围绕中心点旋转)。如何访问我想要制作动画的组件?

我尝试将 svg 文件转换为 jsx 格式。但我仍然无法访问要旋转的组件

应用程序.js:

我不能把整个组件代码放在这里,因为它超过了字符限制。但您可以使用https://www.smooth-code.com/open-source/svgr/playground/将https://drive.google.com/file/d/1lKaSWTO1_0cQQN6rtdaw_yWE9qa5nSjV/view?usp=sharing转换为 jsx 文件

实际代码旋转整个组件,但内部箭头是应该旋转的,而不是整个组件。

0 投票
0 回答
63 浏览

react-native - 是否可以将 onPress 事件添加到从 React Native 中的文件加载的 svg 图形?

在我的 React Native 应用程序中,我需要从文件加载 svg 图形,并根据元素 id 将 onPress 事件添加到合适的 svg 元素。我想问一下在 React Native 中是否可以?

要添加 svg 文件,我计划使用解决方案表单 react-native-svg ( https://www.npmjs.com/package/react-native-svg#use-with-svg-files )。

0 投票
2 回答
620 浏览

react-native - 如何创建带断点的圆形滑块?

我是 react-native 的新手,我想在 react-native 中实现以下设计

图片链接

我正在努力实现这一目标

  • 蓝色圆圈是选择日期的滑块(日期选择器)
  • 更改日期时,滑块(日期选择器)内的圆圈会改变颜色
  • 最后是圆圈内的图像。

如果有人可以提供参考链接或我可以用来创建图像中显示的设计的库,那就太好了。

提前致谢。

0 投票
1 回答
955 浏览

android - 无法解析“./elements/Marker” - 有人可以告诉我出了什么问题吗?

我的 SVG 组件有问题。我认为我已经正确完成了所有操作,但是在编译后我不断收到此错误:

有人可以检查我在下面提供的代码并告诉我出了什么问题吗?我目前正在开发最新的 Expo SDK 和 react-native-svg 包。哦,还有一件更重要的事情要说……我已经在 Expo-Snack 中对其进行了测试,它确实有效!

0 投票
1 回答
552 浏览

react-native - 当用户在 react-native 中按下图表时如何突出显示条形图

使用 onPress 事件是否可以更改条形图的特定条形颜色或样式?

https://github.com/JesperLekland/react-native-svg-charts

任何人,请帮助我。

0 投票
0 回答
302 浏览

javascript - 在 react-native-svg-uri 中加载本地 svg 文件,但它没有显示在正确的位置

这是在 react native 中加载 SVG 文件的代码:

我正在加载 svg 文件屏幕截图,但颜色不在正确位置。

在此处输入图像描述

0 投票
0 回答
314 浏览

react-native - react-native-svg , react-native-svg-uri 运行 app-debug.apk 或 release.apk 时出现网络错误

我有个问题。

此代码可与“react-native run-android”一起成功运行。但是每次构建 debug.apk 或 release.apk 时都会出现“ERROR SVG network error”错误。

我应该怎么办 ?

0 投票
0 回答
239 浏览

react-native - 在不裁剪图像的情况下调整 svg 的大小

我使用https://www.smooth-code.com/open-source/svgr/playground/将 svg 转换为 React 组件

当我将它放在应用程序组件中时,它会裁剪图像。在不影响图像的情况下,在组件内调整 svg 大小/缩放 svg 的正确方法是什么。

0 投票
0 回答
195 浏览

javascript - 将图像放在折线图中的行尾(react-native-svg-charts)

我有一个折线图react-native-svg-charts,我想在行尾包含一个 40 像素 x 40 像素的 PNG 图像。这是我当前的代码:

它看起来像这样:

在此处输入图像描述

我需要让它看起来像这样:

在此处输入图像描述

我可以使用图表数据中的值来计算绝对位置,然后只使用常规图像,但也许使用 SVG 有更简单的方法。

作为记录,PNG 图标也可以是 SVG(我在 SVG 中也有)。

0 投票
1 回答
4398 浏览

javascript - 使用 react-native-svg-charts 的多个折线图

我正在尝试在一个图表中放置多个显示不同数据的折线图,但无法使用 react-native-svg-charts 在 react-native 中这样做。

上面的代码是我正在尝试的,但由于我只得到第一个数据的折线图,所以无法获得正确的设计。

谢谢!