javascript - 在自定义日期开始计时器

Question

我有一个倒计时循环计时器（分为 2 个，第一个，然后是另一个），我可以使用切换播放按钮停止/暂停。我也有影响计数器的递增和递减按钮，我一直未能成功地尝试“关联”到自定义日期（开始计时器）。

我希望能够在可自定义的日期（使用按钮？）启动计时器。

到目前为止，这是我的工作代码...

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

const duration = [15, 6];   

export default function App() {
  const [isPlaying, setIsPlaying] = React.useState(true);
  const [timeIndex, setTimeIndex] = React.useState(0);
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <CountdownCircleTimer
        key={timeIndex}
        isPlaying={isPlaying}
        duration={duration[timeIndex]} 
        colors={[
          ['#FFFF00', 0.4], 
          ['#0000ff', 0.4],
        ]}
        onComplete={() => {
          setTimeIndex((index) => {
            let newIndex = index + 1;
            if (newIndex >= duration.length) {
              newIndex = 0;
            }
            return newIndex;
          });
          return [true];
        }}>
        {({ remainingTime, animatedColor }) => (
          <Animated.Text style={{ color: animatedColor, fontSize: 40 }}>
            {remainingTime}
          </Animated.Text>
        )}
      </CountdownCircleTimer>
      <Button
        title="Toggle Playing"
        onPress={() => setIsPlaying((prev) => !prev)}
      />
      <Text>Counter: {count}</Text>

    <View style={styles.buttons}>
      <TouchableOpacity onPress={() => setCount(currentValue => currentValue + 1)}>
        <Text>Increment</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => setCount(currentValue => currentValue - 1)}>
        <Text>Decrement</Text>
      </TouchableOpacity>
      </View>
    </View>
      );
}

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

标签： javascriptreactjsreact-nativetimercountdowntimer