Question

我每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>
 );
}

Answer 1

如何在每次经历时停止重置计时器另一个屏幕

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

您可以在顶级组件中定义计时器。顶层组件永远不会卸载，因此在更改屏幕时不会取消计时器。

React Native倒数计时器不断重置

1 个答案: