在React Native中创建一个圆形滑块

Question

我想在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-native

注意：我对React和React Native还是比较陌生的，但是对JavaScript有一定的体会。现在，我仍在学习React和React Native。

Answer 1

您最好的最佳选择可能是通过react-native-svg的svg，因为这将使您可以声明性地绘制和设置任意形状的动画，而不必编写特定于平台的本机代码。

请注意，如果您正在使用EXPO或已退出，则设置react-native-svg会稍有不同，这可以解释为什么您提到的某些较旧的示例不起作用（它们是早于expo的）。

使用SVG绘制通常是简单明了的，尽管您将需要在路径中使用圆弧，这与SVG变得一样尴尬（但仍然不太糟）。

圆形滑块最棘手的部分是使用PanResponder捕获触摸输入，并在触摸输入的笛卡尔（x，y）坐标和极坐标（角度，距离）坐标系统之间转换坐标，以便知道将滑块移至何处

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

Here是一个Expo项目，它说明了滑块部分。看起来像这样：

Answer 2

根据注释，如果您对jQuery roundSlider感到满意，则可以根据需要进行自定义。在这里，我只是做一个模拟设计，请查看下面的演示：

DEMO

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

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

希望这会对您有所帮助，或者会给您一些方向发展的想法。