问题标签 [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
问题
伙计们,由于我已经在导入图像时遇到问题,我需要在每种模式下显示不同的图像,但是在尝试时
返回一个错误
试
返回一个错误
使用
工作但得到静态图像我无法改变
谁能帮忙谢谢。
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
,但据我所知,这是一种非常错误的方法。
有任何想法吗?
react-native - 使用 react-native-chart-kit 渲染饼图时出现错误“requireNativeComponent: 'RNSVGLinearGradient' was not found in the UIManager ...”
我已经在我的项目中使用过react-native-chart-kit
,react-native-svg
最初我在 Expo 中创建了我的项目,它工作正常(饼图渲染完美,没有问题)但是当我退出 Expo 并运行项目时react-native run-android
,我收到了这个错误。
我尝试升级/降级 and 的版本react-native-chart-kit
,react-native-svg
但错误仍然相同。还react-native-svg
与 react-native 相关联(仍然没有运气)
我不明白的是,当我在 Expo 上工作时,我没有收到任何错误(即使在构建 Release APK 之后也没有),但是当我弹出 expo 并运行时react-native run-android
,它会产生错误。
另外,我创建了一个干净的项目,只有一个屏幕用于渲染饼图,但错误是相同的。
请提供一些继续下去的东西,卡得很厉害。
react-native - 试图注册两个同名的视图 RNSVGRect
面对这个问题,当我将两个库 react-native-d3multiline-chart 用于折线图和条形图时,我使用的是 react-native-svg-charts。两个库都使用相同的 react-native-svg,当我使用 react-native-svg 时,它显示上述错误。我们该如何解决?
react-native - 如何在 react-native-svg 元素中实现填充属性
我有一个用路径/线绘制的简单三角形,从 AdobeXD 导出为 SVG,然后将 SVG 代码复制并调整到带有 react-native-svg 库元素的 react-native 项目中。我正在尝试填充元素的背景,因为我不希望它是透明的。我认为这就像在 G 元素中使用 web SVG 的属性一样简单fill
,但它不起作用。
继承人的SVG代码:
查看react-native-svg
's 文档,他们说“填充道具是指形状内的颜色。” 但就像我说的那样,道具在元素和元素fill
中都不起作用......有什么想法吗?<Svg>
<G>
reactjs - 如何使用 react-native-svg 防止旋转形状上的翘曲/歪斜?
我目前正在制作一个应用程序react-native
并react-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)
.
有任何想法吗?
react-native - 使用 react-native 动画 api 与原点进行 react-native-svg 旋转的等价物是什么
我有下面的 svg 路径,它在每个value
状态变化中成功地围绕原点旋转,其中值是一些度数值:
我每隔约 20 毫秒调用一次 setState value
,但这还不够平滑,+ 这不是推荐的过渡方式。我想要实现的是使用动画 API 为旋转设置动画,以实现更平滑的旋转。
我尝试将我的value
状态设为Animated.Value
. 然后制作Path
aAnimated.createAnimatedComponent(Path)
并调用:
然后我像这样渲染路径:
这与使用 state 的先前工作代码完全不同。一个原因是动画 API 不支持的 originX、originY 值,我不知道如何替换,但我不确定这是唯一的原因,也许与属性也rotate
有所不同?rotation
所以,问题是,如何使用动画 api 来实现不断调用 setState 的代码的相同结果?