问题标签 [react-native-svg]

我试图将一个react-native-svg元素放入其中View，使其以特定的固定纵横比呈现，然后在包含视图的范围内尽可能大地缩放。

Svg元素 (from )react-native-svg似乎只接受绝对值width和height属性（我尝试使用百分比，但没有渲染，并且调试确认百分比值是NSNull在它们到达本机视图时）。我不确定如何达到预期的效果。这是我到目前为止所尝试的：

这就是我在渲染时看到的。

我希望放大红色和蓝色圆圈以填充 200x200 区域（如果包含视图是矩形而不是正方形，则保持圆形），而无需预先知道组件的消费者/用户所需的大小。

如前所述，我尝试使用百分比，如下所示（其余部分相同）：

但是 SVG 部分根本不绘制。像这样：

控制台日志中没有错误消息或其他说明为什么这不起作用。

在 RN 中布局后测量 UI 元素的方法似乎是异步的，这似乎与我正在尝试做的事情不匹配。我可以使用某种缩放或变换魔法吗？

所需的输出将如下所示（通过硬编码值获得）：

当包含视图不是一个完美的正方形时，我希望它像这样工作：

我已经成功地从各种部分记录的代码片段（主要在这里）拼凑出一个圆形滑块组件。我已经整理了一些东西，现在有了一些可以用作可滑动控制转盘的东西，我可以在其中为可滑动区域设置任意最大角度：

但是，我想要更多的灵活性——我也希望能够选择任意的起始角度。例如，这将允许我创建有点像汽车仪表板控件的拨号盘。下面显示的是我试图让这个工作。如您所见，这弄乱了触摸处理：

显然，我需要补偿触摸处理中的旋转。

我通过在视图中封装一个 SVG 组件（包含此处显示的所有图形和文本）来实现所有这些。对于我遇到问题的示例，我旋转了容器视图（注意将该旋转值也传递给文本，以便将该文本旋转回垂直位置）。

打字稿组件：

并且该组件现在以这种方式使用：（ <CircularSlider rotationOffset={-135} maxAngle={270} onValueChange={(angle) => angle } />或第一个 gif 示例没有偏移量）。

我努力了：

• 在插入 PolarToCartesian() 函数之前调整当前角度，但这变得非常混乱并且没有真正意义，至少我这样做的方式是这样。
• 尝试使用this.container.measure(this.handleMeasure)而不是this.circleSlider.measure(this.handleMeasure)，并从 handleMeasure 中this.circleSlider.measureLayout(ReactNative.findNodeHandle(this.container), this.handleMeasure)删除额外的参数px: number, py: number并读取偏移量（ox 和 oy），但这根本没有给出正确的运动类型......

那么如何在触摸处理中补偿容器视图的旋转呢？或者有没有一种完全不同的方法来解决这个问题，给我我需要的行为？

（顺便使用 React Native 0.57.0 和 react-native-svg ^7.0.2）

我在使用 React Native 中的一些 SVG 时遇到问题。我有一个可点击且运行良好的图表，然后我需要在图表顶部放置另一个 SVG 以绘制一条代表极限得分值的线。我现在面临的问题是我无法再单击图表，因为 SVG 的视图被放置在它的顶部。我将 SVG 的背景颜色设置为透明，这样我至少可以看到它后面的图表，但是，我不知道如何让它再次可点击。

是否有任何工作可以让我通过放置在顶部的透明视图使图表可点击？

这可能是一个愚蠢的问题，但总的来说，我对 react 和 JS 都很陌生，所以我真的可以使用任何类型的帮助。:)

这是图表的图片：

极坐标图和 Svg 圆

如您所见，这里的 Svg 具有非透明背景，几乎覆盖了孔图。

覆盖图表的 svg

这是SVG代码：

这是图表形式chartjs：

他们在一个视图中在一起：

我对<Rect />元素进行了简单的动画插值，但是我的 ui 上没有任何变化，好像宽度保持为 0。

我手动将我的最终值添加到组件中width={149.12}并正确显示它，因此我现在有点困惑为什么它没有从动画中获取相同的值？

反应原生@0.57.1

react-native-svg@7.03

针对 iOS 12

这是完整的实现，本质上是一个包含当前值和总值的法力和健康条，即 50 和 100 应该显示矩形的半角。（示例使用打字稿，但如果需要，答案可以是纯 js）

相关库：https ://github.com/react-native-community/react-native-svg

我正在尝试设计一个 React Native UI，它的中心有一个图像，周围有一堆以圆周运动排列的按钮。

我正在使用以下公式来计算圆形按钮的位置

cx: cx={Math.cos(2 * Math.PI / numberOfPoints * i) * circleRadius}

cy: cy={Math.sin(2 * Math.PI / numberOfPoints * i) * circleRadius}

我的 SVG 渲染 const circleRadius = Dimensions.get('window').width / 2; 常量 numberOfPoints = 8;

结果在圆圈的右下部分而不是模型中的左上部分中出现 3 个圆圈

如设计中所示，我将如何以圆形方式渲染圆圈？有没有更简单/更好的方法可以在不使用的情况下完成此任务react-native-svg？

我需要编写使用反应原生 ART 绘制的特定形状的点击事件。我怎样才能做到这一点？你能分享你的想法或想法吗？我可以解决这个问题吗？

我有一个嵌套在使用react-native-svg库创建的 SVG 元素内的 TouchableOpacity。它看起来像这样：

未触发 handleClick 的位置。我对 Android 的相同功能有不同的实现，其中 TouchableOpacity 是外部Svg元素并且onPress被正确触发。有没有人遇到过这个问题并找到了解决方案？不幸的是，将其放置在 iOS 外部不是一种选择。

使用react-native-svg的版本是 7.0.3

谢谢！

我试图使用 react-native-svg 为我的 react-native 项目中的文本添加渐变

在这里我只得到（#C2515D）这种颜色，我无法得到黑色，尝试 5 小时。有什么建议么？

我有以下 svg 代码，我想将其转换为 react-native-svg。它是如何正确完成的？

我正在尝试“复制”这个 https://codepen.io/dannyb9737/pen/jQJZWO

我也尝试在沙箱中重现它 - https://snack.expo.io/Bk-s-2MyN 但似乎组件掩码未定义:(

进入 react-native，但只有在我在 Circle 组件中添加 mask 道具后应用程序才会崩溃，这是我的代码（将它与 styled-component 混合）。

所有这一切背后的想法是创建一个组件，该组件将获取一个数字，它将填充精确的刻度数作为 arg。

我正在使用 android 模拟器，“react”：“16.5.0”，“react-native”：“0.57.2”，“react-native-svg”：“^8.0.8”，

谢谢！