如何设置某个区间的 ProgressBar - React Native（应该支持 IOS 和 Android）

Question

在我的应用程序中，我需要显示进度条，该进度应从 0 分钟增加到 1 分钟或给定 Max time。

试过 - 一个

我尝试了来自“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-paperProgressBar，该值应在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 时自动开始进度。