我可以将两个计时器集成到同一个计时器中吗？

Question

我正在使用提供的 react-native-countdown-circle-timer 零食示例。有了它，我想同时拥有两个计时器，或者一个接一个地以无限的顺序排列。

我的意思是让第一个计时器计数（以及何时结束），然后是第二个计时器（不同的时间/颜色），然后第一个计时器再次无限期地切换。

import * as React from 'react';
import { Text, View, StyleSheet, Animated, Button } from 'react-native';
import Constants from 'expo-constants';
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';


export default function App() {
  const [isPlaying, setIsPlaying] = React.useState(true)
  return (
    <View style={styles.container}>
      <CountdownCircleTimer
        isPlaying={isPlaying}
        duration={10}                  // could I have 2 different durations here??
        colors={[
          ['#FFFF00', 0.4],               //Colour 1
          ['#0000ff', 0.4],               //Colour 2
        ]}
        onComplete={() => [true]}
    >
      {({ remainingTime, animatedColor }) => (
        <Animated.Text style={{ color: animatedColor, fontSize: 40 }}>
          {remainingTime}
        </Animated.Text>
      )}
    </CountdownCircleTimer>
    <Button title="Toggle Playing" onPress={() => setIsPlaying(prev => !prev)}/>
  </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

Answer 1

您可以在 react-native-countdown-circle-timer 上调用 onComplete 回调后创建持续时间之间的切换。

请参阅下面的此博览会代码。它有一个解决方案的工作示例。

https://snack.expo.dev/@darshan09200/stackoverflow-question-no-69081296

根据docs，如果你想在组件挂载后重置时间

键={值} 每当更新此值时，计时器组件都会采用新的持续时间值

const duration = [10, 20];

您可以在此数组中指定任意数量的持续时间。

setTimeIndex((index) => {
    let newIndex = index + 1;
    if (newIndex >= duration.length) {
        newIndex = 0;
    }
    return newIndex;
});

这将评估持续时间数组中的下一个索引。如果索引超过长度，则从0开始，调用无限循环。