react-native - Start a countdown timer with react-natiev

Question

I want to have a countdown component for my project. I tried by setting setInterval, but I have a requirement to pause and continue the timer. So How can I achieve this?

标签： react-native

Answer 1

我创建了一个 jsfiddle，并简单演示了它是如何完成的：https ://jsfiddle.net/69z2wepo/258601/ 。使用 React 编写，但原理与 React Native 完全相同。

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 10,
    };

    this.interval = null;

    this.cleanUp = this.cleanUp.bind(this);
    this.decreaseCounter = this.decreaseCounter.bind(this);
    this.startCounter = this.startCounter.bind(this);
  }

  componentWillUnmount() {
    cleanUp();
  }

  cleanUp() {
    clearInterval(this.interval);
  }

  decreaseCounter() {
    if (this.state.counter === 0) {
        return this.cleanUp();
    }
    this.setState({counter: this.state.counter - 1});
  }

  startCounter() {
    this.interval = setInterval(this.decreaseCounter, 1000);
  }

  render() {
    return (
        <div>
        <button onClick={this.startCounter}>Start</button>
        Counter {this.state.counter}
        <button onClick={this.cleanUp}>Stop</button>
      </div>
    );
  }
}