在 React Native 中创建一个圆形滑块
Creating a circular slider in React Native
我想在 React Native 中为我的项目创建一个圆形滑块。虽然我不完全确定如何创建一个。有人可以帮帮我吗？
这是我希望它看起来像的草图：
我在互联网上做了一些搜索，发现了一些关于 React Native 中的圆形滑块的帖子。但是这些帖子似乎过时了，而且这些帖子中的项目 linked/provided 对我不起作用。
1.
2.
注意：我对 React 和 React Native 的世界相当陌生，但在 JavaScript 方面确实有不错的经验。现在我还在学习 React 和 React Native。
根据评论，如果您对 jQuery roundSlider 感到满意，那么您可以根据自己的需要简单地进行自定义。这里我只是做一个模型设计，查看下面的演示：
DEMO
另外，如果你想把它作为一个 React 组件，那么你可以像下面这样制作一个简单的包装器，并且可以直接在任何 React 应用程序中使用。
https://stackblitz.com/edit/react-jquery-round-slider
希望这对您有所帮助，或者会给您一些前进方向的想法。
你最好的可能是通过 react-native-svg 的 svg，因为这将允许你以声明方式绘制和动画任意形状，而无需编写特定于平台的本机代码。
请注意，如果您正在使用 expo 或已弹出，设置 react-native-svg 会略有不同，这可以解释为什么您提到的一些旧示例不起作用（它们早于 expo）。
用 SVG 绘图通常很简单，尽管您需要在路径中使用圆弧，这与 SVG 一样笨拙（但还算不错）。
圆形滑块最棘手的部分是使用 PanResponder 捕获触摸输入，并在触摸输入的笛卡尔 (x,y) 坐标和极坐标（角度、距离）坐标系之间转换坐标，以便知道移动到哪里滑块到。
在您的情况下，您似乎想全天候将滑块的移动锁定为特定的增量，因此您还需要找到与当前触摸的极坐标最近的增量，但这应该在极坐标中很容易 - 只需找到与触摸角度最接近的增量。
Here是一个说明滑块部分的Expo项目。它看起来像这样：
我想在 React Native 中为我的项目创建一个圆形滑块。虽然我不完全确定如何创建一个。有人可以帮帮我吗？
这是我希望它看起来像的草图：
我在互联网上做了一些搜索，发现了一些关于 React Native 中的圆形滑块的帖子。但是这些帖子似乎过时了，而且这些帖子中的项目 linked/provided 对我不起作用。
1.
注意：我对 React 和 React Native 的世界相当陌生，但在 JavaScript 方面确实有不错的经验。现在我还在学习 React 和 React Native。
根据评论，如果您对 jQuery roundSlider 感到满意，那么您可以根据自己的需要简单地进行自定义。这里我只是做一个模型设计，查看下面的演示：
DEMO
另外，如果你想把它作为一个 React 组件，那么你可以像下面这样制作一个简单的包装器，并且可以直接在任何 React 应用程序中使用。
https://stackblitz.com/edit/react-jquery-round-slider
希望这对您有所帮助，或者会给您一些前进方向的想法。
你最好的可能是通过 react-native-svg 的 svg，因为这将允许你以声明方式绘制和动画任意形状，而无需编写特定于平台的本机代码。
请注意，如果您正在使用 expo 或已弹出，设置 react-native-svg 会略有不同，这可以解释为什么您提到的一些旧示例不起作用（它们早于 expo）。
用 SVG 绘图通常很简单，尽管您需要在路径中使用圆弧，这与 SVG 一样笨拙（但还算不错）。
圆形滑块最棘手的部分是使用 PanResponder 捕获触摸输入，并在触摸输入的笛卡尔 (x,y) 坐标和极坐标（角度、距离）坐标系之间转换坐标，以便知道移动到哪里滑块到。
在您的情况下，您似乎想全天候将滑块的移动锁定为特定的增量，因此您还需要找到与当前触摸的极坐标最近的增量，但这应该在极坐标中很容易 - 只需找到与触摸角度最接近的增量。
Here是一个说明滑块部分的Expo项目。它看起来像这样：