React native 如何为特定间隔设置ProgressBar-React Native（应支持IOS和Android）

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

尝试-一个

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

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

尝试-两次

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

---

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

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

如果需要跟踪0到5分钟的进度，并希望每1s更新一次，请执行以下操作：

const useProgress=（maxTimeInSeconds=300）=>{
const[elapsedTime，setElapsedTime]=useState（0）；
const[progress，setProgress]=useState（0）；
useffect（（）=>{
const intervalId=setInterval（（）=>{
如果（进度<1）{
setElapsedTime（t=>t+1）；
}
}, 1000);
return（）=>clearInterval（intervalId）；
}, []);
useffect（（）=>{
设置进度（elapsedTime/maxTimeInSeconds）；
}，[elapsedTime]）；
返回进度；
};

如何在组件中使用：

const progress = useProgress();

return <ProgressBar progress={progress} />

const progress=useProgress（）；
返回

注意：代码未测试。当调用
useProgress
时，这将自动启动进程。
因为您的原始问题中有一个
getTime
函数调用，我假设您已经在跟踪开始时间、经过了多少时间等-是这样吗？我将用一个跟踪1分钟进度的示例更新我的答案。如果我希望总时间为5分钟，而通过的时间为1分钟，我想做什么？还有如何开始进度？在我的场景中，最长时间总是5分钟。通过api调用，我将从计算的剩余时间（或经过的时间）中获得一些值。我想知道如何将值传递给Progress视图，以及如何启动它的Progress进程进程本身并不运行。您必须不断计算进度值并将其传递给ProgressBar组件或用作自定义视图的宽度。例如，如果您希望每秒钟更新一次进度，则需要使用
setInterval（callback，1000）
并在
callback
中计算新的进度值。是的，我可以理解您的观点。顺便说一句，我可以看到任何样本代码将非常有用。