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

react-native - 在 React-Native 应用程序上加载巨大的 SVG 的最佳方式是什么?

我正在开发一个应用程序,它基本上是一个协作绘图工具。

我有一个巨大的 SVG 原图 (4.5 MB),用户可以登录 pan 并在这个原图上绘制他们自己的画。

我使用 react-native-svg 和 react-native-svg-transformer。我尝试了 2 种方法,但都失败或不够好:

第一个是添加资产并导入为:

问题是它向我显示了这个错误:

RangeError:超出最大调用堆栈大小。

另一种方法是从 URI 加载它。像这样:

使用这种方法,我有两个问题:

我不能有装载机。所以它显示一个空白屏幕,当它从我的服务器下载 4 MB 时,只显示一个空白屏幕。

然后,加载时,缩放或平移时的性能也太差了。

有人对这种情况下的最佳方法有什么建议吗?

0 投票
1 回答
470 浏览

react-native - SVG 转换在 React-Native-SVG 应用程序的 Web 版本中不起作用,但在移动设备中起作用?

我在这里有一个非常奇怪的错误。

我正在做一个应用程序,用户可以使用 react-native-svg 放大和缩小并在 SVG 屏幕内绘制一些东西。

在我在模拟器上运行的移动应用程序中,转换工作完美。

在同一个应用程序中,作为 webapp (expo start --web) 运行,它从未应用过任何转换。即使我在矩阵上硬编码。

这是我的重要代码的一部分:

这是一个简单的变压器矩阵。在我的渲染方法中,我有:

例如,如果我将 transformerMatrix.a 更改为 1.3。图像放大了 30%。在模拟器上,它进行了转换。但是在 webApp 中什么也没有发生。

在此处输入图像描述

在此处输入图像描述

如你看到的。它没有放大 webapp 应用程序,而不是 iOS 应用程序。

有谁知道在 webApp 中与 react-native-svg 相关的东西没有被转换?

0 投票
1 回答
404 浏览

javascript - 在 react-native 中绘制折线图的最高效方式

我想知道以非常高的频率(每 15 毫秒新值)绘制具有流数据的实时折线图的最高效方法是什么。我通过 BLE 获取数据,并添加到我永远不会超过 500 个项目的数组中。我需要从这些数据中获得大约 10 个不同的折线图。

整个情况如下:*每15ms的数据流*我将它保存在redux存储中array[500](当有新元素时删除第一个元素并且array.length >= 500 *必须将数据显示为10个独立的折线图

我正在使用react-native-svg-charts,按预期工作,但是当有 500 个点并且第一个点正在改变(因为我正在删除它)时,图表会重新渲染本身并且整个视图变得滞后(~20fps)。

我想知道在这个场景中使用setNativeProps(on <Path />from react-native-svg) 会有所帮助,但我不确定它是否是最高效的方式。如果您有更好的想法和建议(例如使用react-native-art),请告诉我,我需要在此视图中拥有 ~60fps。

最好的

0 投票
0 回答
359 浏览

react-native - react-native 的交互式地图

我正在尝试创建一个使用交互式全球地图的应用程序。地图应该能够缩放到特定国家并根据需要进行旋转等。地形和道路特征是不必要的。我在这里使用 d3 和 geoJson 为浏览器做了一个合适的实现。这对我来说是完美的实现。我试过 react-native-maps 但它确实提供了我需要的可定制性。我也使用 d3 和 geoJson 像这样反应原生

但是它在旋转过程中的表现并不像我想要的那么好。有什么可能的解决方案吗?

0 投票
0 回答
927 浏览

react-native - React-Native-SVG “梯度不停歇”

描述

React-Native-Svg 对某些带有渐变的 svg 图标有问题。

平台

  1. IOS 13.4
  2. 安卓6及以上
  3. react-native-svg - v12.1.0

问题

  1. 这是 svg 文件的链接https://svgshare.com/i/L5A.svg
  2. 我使用 SvgCss 导出,结果如下所示
  3. 我使用 react-native-svg-transformer - v0.14.3 也显示相同的结果

它是如何显示的 .

它显示为这样

这就是它应该显示的方式 .

按道理需要这样显示

0 投票
1 回答
182 浏览

reactjs - 使用 react-native-svg 的不变违规

尝试使用react-native-svg时出现以下错误:

错误截图

我在我的代码中使用这样的 react-native-svg : 代码截图

我这样称呼组件

我正在使用 react-native-svg : 9.13.3 和 expo : 36 我使用 expo install react-native-svg 安装了 react-native-svg 并且我已经尝试使用重置缓存重新启动.....请救救我,哈哈美好的一天 !

0 投票
0 回答
760 浏览

reactjs - react-native-svg:无法从 xml 创建 svg

嗨,我正在尝试使用 react-native-svg 在 react-native 应用程序上生成 svg,根据我使用 SvgXml 从 xml 生成 svg 的文档,但它不起作用。这是 svg 组件:

这是我导入 svg 的应用程序组件:

在渲染时,我收到此错误:

0 投票
1 回答
641 浏览

react-native - 将垂直线性渐变应用于 svg 线和圆

我尝试根据文档使用 react-native-svg 创建一个带有垂直线性渐变的 SVG 圆圈。这是代码的样子:

我的目标是圆上的渐变是垂直的,从“#F3455F”到“#4A75D5”(颜色在主题文件中定义并用作变量)。BoxWidth 等于 '30',而 boxHeight 是 '70'。

但是,圆圈​​呈现为实心“#F3455F”彩色图形。

我如何定义渐变有什么问题?

0 投票
1 回答
1773 浏览

react-native - react-native-chart-kit 1段折线图不打印y标签

我有以下代码,其中 y 轴上只有 2 个值,这意味着单个段就足够了。但事实证明,顶行的 y 标签没有出现。有解决办法吗?当前图表状态

下面是我为此编写的代码。

任何帮助表示赞赏。

0 投票
1 回答
602 浏览

react-native - 如何减小模块 react-native-svg-charts 中 PieChart 的宽度

既然已经谢谢你想知道是否有人知道如何减小 Graph Pie 的宽度,为了让它变薄我在 svg 中尝试了一些属性,但没有任何人可以提供帮助

今天我有这个结果我想达到这个结果

当前的

在此处输入图像描述

预计

在此处输入图像描述

当前组件