在 React Native 中创建圆形滑块

IT技术 javascript reactjs react-native circular-slider
2021-05-03 17:45:50

我想在 React Native 中为我的一个项目创建一个圆形滑块。虽然我不完全确定如何创建一个。有人可以帮我吗?

这是我希望它看起来像的一个小草图:

我在互联网上做了一些搜索,发现了一些关于 React Native 中圆形滑块的帖子。但是这些帖子似乎已经过时,这些帖子中链接/提供的项目对我不起作用。

1. https://stackoverflow.com/questions/51058669/react-native-circular-slider
2. https://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react -本国的


注意:我对 React 和 React Native 的世界还很陌生,但在 JavaScript 方面确实有不错的经验。现在我仍在学习 React 和 React Native。

2个回答

最好的方法可能是通过 react-native-svg 实现 svg,因为这将允许您以声明方式绘制和动画任意形状,而无需编写特定于平台的本机代码。

请注意,如果您正在使用 expo 或已退出,则设置 react-native-svg 略有不同,这可能解释了为什么您提到的一些较旧的示例不起作用(它们早于 expo)。

使用 SVG 绘图通常很简单,尽管您需要在路径中使用圆弧,这与 SVG 一样笨拙(但还不错)。

圆形滑块最棘手的部分是使用 PanResponder 捕获触摸输入,并在触摸输入的笛卡尔 (x,y) 坐标和极坐标(角度、距离)坐标系之间转换坐标,以便知道将滑块移动到哪里。

在您的情况下,您似乎希望将滑块的移动锁定为全天候的特定增量,因此您还需要找到与当前触摸的极坐标最近的增量,但这在极坐标中应该很容易- 只需找到与触摸角度最接近的增量。

是一个说明滑块部分的 Expo 项目。它看起来像这样:

在此处输入图片说明

根据评论,如果您对jQuery roundSlider感到满意,那么您可以根据需要简单地进行自定义。在这里我只是做了一个模型设计,查看下面的演示:

DEMO

React Native 中的圆形滑块

此外,如果您希望将其作为 React 组件,那么您可以制作一个如下所示的简单包装器,并且可以直接在任何 React 应用程序中使用。

https://stackblitz.com/edit/react-jquery-round-slider

希望这会帮助你,或者会给你一些想法,让你朝着一个方向前进。