问题标签 [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 回答
32 浏览

react-native - 将不同的图像导入图像组件 react-native-svg

问题

伙计们,由于我已经在导入图像时遇到问题,我需要在每种模式下显示不同的图像,但是在尝试时

返回一个错误

返回一个错误

使用

工作但得到静态图像我无法改变

谁能帮忙谢谢。

0 投票
4 回答
1255 浏览

expo - Expo 36:无法从“node_modules/css-tree/lib/syntax/default.js”解析“../../data”

将 expo 35 升级到 36 后出现此错误。

我试过了yarn add css-tree。这个错误消失了,但随后模块react-native-svg开始给出与它包含的css-tree模块相同的错误。

我已尝试升级expo-cli到最新版本并重新启动终端。我正在运行构建expo start -c以确保缓存不会影响它。我试图从模拟器中删除应用程序。还是一样。

我已经能够通过升级css-tree内部的依赖项来应用临时修复react-native-svg,但据我所知,这是一种非常错误的方法。

有任何想法吗?

0 投票
1 回答
1791 浏览

android - 与文本内联的 React-native 图标

嗨我想实现以下风格:

在此处输入图像描述

但是使用以下代码,我在单独的列中获得了一个图标,在另一列中获得了文本

在此处输入图像描述

请忽略不同的图标。这个问题有什么解决办法吗?

0 投票
2 回答
1435 浏览

javascript - 如何用n个切片画一个圆

我正在使用 react-native-svg 模块,我想画一个分成 n 片的圆圈。我的圆半径是 41,它的中心是 (50, 50) 例如对于 n=6 我想画这样的东西:

5片圆

0 投票
0 回答
303 浏览

react-native - 使用 react-native-chart-kit 渲染饼图时出现错误“requireNativeComponent: 'RNSVGLinearGradient' was not found in the UIManager ...”

我已经在我的项目中使用过react-native-chart-kitreact-native-svg最初我在 Expo 中创建了我的项目,它工作正常(饼图渲染完美,没有问题)但是当我退出 Expo 并运行项目时react-native run-android,我收到了这个错误。

我尝试升级/降级 and 的版本react-native-chart-kitreact-native-svg但错误仍然相同。还react-native-svg与 react-native 相关联(仍然没有运气)

我不明白的是,当我在 Expo 上工作时,我没有收到任何错误(即使在构建 Release APK 之后也没有),但是当我弹出 expo 并运行时react-native run-android,它会产生错误。

另外,我创建了一个干净的项目,只有一个屏幕用于渲染饼图,但错误是相同的。

请提供一些继续下去的东西,卡得很厉害。

0 投票
1 回答
2333 浏览

react-native - 试图注册两个同名的视图 RNSVGRect

面对这个问题,当我将两个库 react-native-d3multiline-chart 用于折线图和条形图时,我使用的是 react-native-svg-charts。两个库都使用相同的 react-native-svg,当我使用 react-native-svg 时,它显示上述错误。我们该如何解决?

0 投票
1 回答
559 浏览

react-native - 在本机反应中隐藏重叠svg的背景

我正在尝试创建两个相互重叠的圆圈的形状,我已经成功地完成了,只是重叠部分显示的是背景图像,而不是设置在圆圈内的图像,并且在 react-native-svg 区域中非常新,所以请帮助我。这是我的代码:

在此处输入图像描述

0 投票
1 回答
872 浏览

react-native - 如何在 react-native-svg 元素中实现填充属性

我有一个用路径/线绘制的简单三角形,从 Adob​​eXD 导出为 SVG,然后将 SVG 代码复制并调整到带有 react-native-svg 库元素的 react-native 项目中。我正在尝试填充元素的背景,因为我不希望它是透明的。我认为这就像在 G 元素中使用 web SVG 的属性一样简单fill,但它不起作用。

继承人的SVG代码:

查看react-native-svg's 文档,他们说“填充道具是指形状内的颜色。” 但就像我说的那样,道具在元素和元素fill中都不起作用......有什么想法吗?<Svg><G>

0 投票
1 回答
203 浏览

reactjs - 如何使用 react-native-svg 防止旋转形状上的翘曲/歪斜?

我目前正在制作一个应用程序react-nativereact-native-svg用于渲染形状,即矩形、椭圆等。

我将这些形状包含在宽度与高度比为 2:1 的 SVG 容器组件中

  • 形状的宽度是容器宽度的百分比。
  • 形状的高度是容器高度的百分比。

我目前遇到了一个我无法解决的问题。每次我旋转一个形状时,它都会以奇怪的方式扭曲和扭曲。

这是一个旋转 0 度、宽度为 60%、高度为 30% 的矩形:

在此处输入图像描述

这是同一个矩形,旋转了 71 度(宽度和高度与之前相同):

在此处输入图像描述

我将矩形封装在 SVG 组件中,如下所示: <Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

我试图修改preserveAspectRatio组件的道具,但任何使用它的选择似乎都会扭曲形状的宽度和高度。

我所有的 SVG 形状组件都使用大致相同的格式

我已经对其进行了编程,以使rotate()字符串产生,例如:rotate(71, 30, 55).

有任何想法吗?

0 投票
2 回答
2687 浏览

react-native - 使用 react-native 动画 api 与原点进行 react-native-svg 旋转的等价物是什么

我有下面的 svg 路径,它在每个value状态变化中成功地围绕原点旋转,其中值是一些度数值:

我每隔约 20 毫秒调用一次 setState value,但这还不够平滑,+ 这不是推荐的过渡方式。我想要实现的是使用动画 API 为旋转设置动画,以实现更平滑的旋转。

我尝试将我的value状态设为Animated.Value. 然后制作PathaAnimated.createAnimatedComponent(Path)并调用:

然后我像这样渲染路径:

这与使用 state 的先前工作代码完全不同。一个原因是动画 API 不支持的 originX、originY 值,我不知道如何替换,但我不确定这是唯一的原因,也许与属性也rotate有所不同?rotation所以,问题是,如何使用动画 api 来实现不断调用 setState 的代码的相同结果?