“react-native-svg”的相关标签问题

0 投票

4 回答

47455 浏览

react-native - 如何在 React Native 视图中自动缩放 SVG 元素？

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

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

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

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

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

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

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

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

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

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

react-native react-native-svg

0 投票

1 回答

815 浏览

javascript - 如何补偿圆形滑块组件中的旋转容器视图？

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

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

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

我通过在视图中封装一个 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）

0 投票

1 回答

216 浏览

react-native - 放置在另一个 SVG 下时使图表可点击

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

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

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

这是图表的图片：

极坐标图和 Svg 圆

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

覆盖图表的 svg

这是SVG代码：

这是图表形式chartjs：

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

react-native svg chart.js react-chartjs react-native-svg

0 投票

2 回答