问题标签 [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.
react-native - 在 React-Native 应用程序上加载巨大的 SVG 的最佳方式是什么?
我正在开发一个应用程序,它基本上是一个协作绘图工具。
我有一个巨大的 SVG 原图 (4.5 MB),用户可以登录 pan 并在这个原图上绘制他们自己的画。
我使用 react-native-svg 和 react-native-svg-transformer。我尝试了 2 种方法,但都失败或不够好:
第一个是添加资产并导入为:
问题是它向我显示了这个错误:
RangeError:超出最大调用堆栈大小。
另一种方法是从 URI 加载它。像这样:
使用这种方法,我有两个问题:
我不能有装载机。所以它显示一个空白屏幕,当它从我的服务器下载 4 MB 时,只显示一个空白屏幕。
然后,加载时,缩放或平移时的性能也太差了。
有人对这种情况下的最佳方法有什么建议吗?
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 相关的东西没有被转换?
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。
最好的
react-native - react-native 的交互式地图
我正在尝试创建一个使用交互式全球地图的应用程序。地图应该能够缩放到特定国家并根据需要进行旋转等。地形和道路特征是不必要的。我在这里使用 d3 和 geoJson 为浏览器做了一个合适的实现。这对我来说是完美的实现。我试过 react-native-maps 但它确实提供了我需要的可定制性。我也使用 d3 和 geoJson 像这样反应原生
但是它在旋转过程中的表现并不像我想要的那么好。有什么可能的解决方案吗?
react-native - React-Native-SVG “梯度不停歇”
描述
React-Native-Svg 对某些带有渐变的 svg 图标有问题。
平台
- IOS 13.4
- 安卓6及以上
- react-native-svg - v12.1.0
问题
- 这是 svg 文件的链接https://svgshare.com/i/L5A.svg
- 我使用 SvgCss 导出,结果如下所示
- 我使用 react-native-svg-transformer - v0.14.3 也显示相同的结果
它显示为这样
按道理需要这样显示
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 并且我已经尝试使用重置缓存重新启动.....请救救我,哈哈美好的一天 !
reactjs - react-native-svg:无法从 xml 创建 svg
嗨,我正在尝试使用 react-native-svg 在 react-native 应用程序上生成 svg,根据我使用 SvgXml 从 xml 生成 svg 的文档,但它不起作用。这是 svg 组件:
这是我导入 svg 的应用程序组件:
在渲染时,我收到此错误:
react-native - 将垂直线性渐变应用于 svg 线和圆
我尝试根据文档使用 react-native-svg 创建一个带有垂直线性渐变的 SVG 圆圈。这是代码的样子:
我的目标是圆上的渐变是垂直的,从“#F3455F”到“#4A75D5”(颜色在主题文件中定义并用作变量)。BoxWidth 等于 '30',而 boxHeight 是 '70'。
但是,圆圈呈现为实心“#F3455F”彩色图形。
我如何定义渐变有什么问题?