如何使“rn-animated-progress-circle”无限循环答案

【问题标题】：How to make `rn-animated-progress-circle` loop endlessly如何使“rn-animated-progress-circle”无限循环
【发布时间】：2022-01-12 07:41:05
【问题描述】：

我对本机反应还很陌生。我一直在寻找一个连续的循环加载器，我在 NPM rn-animated-progress-circle 上发现了这个惊人的加载器，它对我来说非常有用，但它不会连续动画。

您还知道其他任何持续动画的人吗？或者你知道有什么方法可以让这个连续动画。

<ProgressCircle
  value={0.4}
  size={200}
  thickness={0.87}
  color='#FFFFFF'
  unfilledColor='#000000'
  animationMethod='spring'
  shouldAnimateFirstValue={true}
  animationConfig={{ speed: 4 }}
/>

【问题讨论】：

标签： javascript reactjs react-native expo

【解决方案1】：

嘿，你可以使用这个逻辑在无限循环中循环，或者你可以把它放一秒钟

import * as Progress from "react-native-progress";

const useProgress = (maxTimeInSeconds = 30) => {
    const [initialTime] = useState(() => +new Date());
    const [counter, setCounter] = useState(0);
    useEffect(() => {
        const intervalId = setInterval(() => {
            setCounter((t) => t + 1);
        }, 1000);
        return () => clearInterval(intervalId);
    }, []);

    const elapsedTime = Math.floor(((+new Date()) - initialTime) / 1000);
    if (elapsedTime == 30) {
        return maxTimeInSeconds;
    }
    
    return (elapsedTime % maxTimeInSeconds) / maxTimeInSeconds;
};

const progress = useProgress();

in progresscircle add progress={progress}

<Progress.Circle
  style={{ alignItems: "center" }}
  progress={progress}
   // indeterminate={this.state.indeterminate}
   size={Dimensions.get("window").width * 0.561}
   thickness={10}
   borderWidth={0}
   endAngle={10}
   strokeCap="round"
   color={"#354659"}
    // indeterminateAnimationDuration={1}
   unfilledColor={"#031830"}        

/>

【讨论】：

包没有progress prop。
@FaruqAlli-Balogun 我已经编辑了代码，请查看