时间戳

首页 > 解决方案 > React Native 倒数计时器不断重置

react-native - React Native 倒数计时器不断重置

问题描述

我设置了一个倒计时计时器，每 20 秒显示一次警报提示，并选择延长计时器或取消计时器。每次我在我的应用程序上转到另一个屏幕并返回主页时，计时器都会自行重置，并且在后台会有多个计时器，然后会出现多个提示。这甚至包括延长计时器的时间。

每次我通过应用程序上的另一个屏幕并将其保持在一个计时器时，如何阻止它重置计时器？

请看我的示例代码：

import CountDown from 'react-native-countdown-component';

export default class App extends React.Component {



constructor(props) {
    super(props);

    this.state = {
      timer: 20,
    };
  }
};
timesUp = () => {
    Alert.alert(
      "ALERT ",
      'Would you like to extend timer?',
      [
        {
          text: 'Extend Timer',
          onPress: () =>
            this.setState(previousState => ({
              timerId: ++previousState.timerId,
            })),
        },

        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
        },
      ],
      { cancelable: false }
    );
  };

render(){
 return(
        <View style={styles.countdownContainer}>
          <CountDown
            id={this.state.timerId}
            until={this.state.timer}
            onFinish={this.timesUp}
            timeToShow={['M', 'S']}
            digitStyle={{ backgroundColor: '#FFF' }}
            size={20}
          />
        </View>
 );
}

标签： react-nativecountdowntimer

解决方案

每次我通过另一个屏幕时，如何阻止它重置计时器

它正在重置，因为当您更改屏幕时组件已卸载。

您可以在顶级组件中定义计时器。顶级组件永远不会被卸载，所以当你改变屏幕时你的计时器不会被取消。

推荐阅读