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

Question

我正在使用提供的 react-native-countdown-circle-timer 零食示例。有了它，我想把两个计时器合二为一，或者一个接一个，顺序不限。

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

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/Whosebug-question-no-69081296

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

key={value} Whenever this value is updated the timer component takes the new value of the duration

const duration = [10, 20];

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

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

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

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

Can I integrate two timers in the same one?

javascript

merge

countdowntimer

reactjs

react-native