如何为特定时间间隔设置进度条 - React Native（应支持 IOS 和 Android）

Question

在我的应用程序中，我需要显示进度栏，该进度应从 0 分钟增加到 1 分钟或给定最大时间。

尝试过 - 一个

我尝试了“react-native-paper”中的进度条

 <ProgressBar progress={getTime} color={COLORS.grey} />

尝试过 - 两个

<Animated.View
            style={[
              {
                width: '100%',
                height: 5,
                borderRadius: 1,
                backgroundColor: COLORS.yellow,
              },
              {width: 25 + '%'},
            ]}
          />

但无法获得输出

让我知道如何实现这一目标，如下图所示。谢谢

Answer 1

对于您尝试的两种解决方案，您都需要计算组件的进度值。如果是react-native-paper ProgressBar，则该值应在 0-1 范围内。对于您的Animated.View解决方案，它应该在 0-100 的范围内。

要计算该值，您需要知道总时间和已经过去的时间。然后您可以简单地除以elapsedTime/totalTime得到 0-1 之间的值。

如果您需要跟踪 0 到 5 分钟的进度，并希望它每 1 秒更新一次：

const useProgress = (maxTimeInSeconds = 300) => {
  const [elapsedTime, setElapsedTime] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (progress < 1) {
        setElapsedTime(t => t + 1);
      }
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    setProgress(elapsedTime / maxTimeInSeconds);
  }, [elapsedTime]);

  return progress;
};

如何在组件中使用：

const progress = useProgress();

return <ProgressBar progress={progress} />

注意：代码未经测试。useProgress这将在调用时自动开始进度。