我如何从本机反应中获得这个进度条？

Question

所以想在react native中实现一个这样的进度条。我找到了一个库https://www.npmjs.com/package/react-native-progress，但是这个库没有这样的进度条。问题是圆圈部分。有没有像这样的进度条的库？如果没有，那么将不胜感激关于如何实现这一点的任何想法。因此，由于一位评论者对它是滑块还是进度条感到困惑，我将包括全屏图像。有一个计时器，进度条或进度滑块实时反映。

Answer 1

我们仍然可以为此目的利用 react-native-community/slider。这是有道理的，因为我们可以允许用户快进。如果您不想允许用户交互，您仍然可以通过滑块组件道具禁用它。

为了平滑滑动，滑块以更高的滴答速率更改其值。您可能想稍微试验一下，以使其适合您的需要。

这是我如何做到的例子。

const [progress, setProgress] = useState(-1)

// takes time in seconds
function interpolate(time) {
  return time * 600
}

// runs 10 seconds, you can take any other value
const [time, setTime] = useState(interpolate(10))

useEffect(() => {
  if (progress < time && progress > -1) {
    const timer = setTimeout(() => setProgress(progress + 10), 10)
    return () => clearTimeout(timer)
  }
}, [progress, time])

const startTimer = React.useCallback(() => {
  setProgress(0)
}, [])

return (
  <SafeAreaView style={{ margin: 30 }}>
    <Slider
      style={{ width: 300, height: 40, backgroundColor: "red" }}
      value={progress}
      minimumValue={0}
      maximumValue={time}
      minimumTrackTintColor="#FFFFFF"
      maximumTrackTintColor="#FFFFFF"
    />
    <Pressable style={{ marginTop: 10 }} onPress={() => startTimer()}>
      <Text>Toggle timer</Text>
    </Pressable>
  </SafeAreaView>
)

以上是一个虚拟实现，它将运行计时器持续 10 秒，滑块将像进度条一样自动移动。

我如何从本机反应中获得这个进度条？

How do I get this progress bar from react native?

javascript

android

mobile-development

react-native