function - 如何通过点击原生反应中的 touchableOpacity 来开始倒计时？

Question

按下a<CountDown/> 时如何启动 a ？TouchableOpacity

我最近发现了 react-native 的倒计时组件。

倒计时会自动开始，但我希望它在单击 时开始运行TouchableOpacity。怎么做到呢？

Answer 1

这是一个非常基本的例子，可以帮助你

constructor(props: Object) {
  super(props);
  this.state ={ timer: 3}
}

componentDidUpdate(){
  if(this.state.timer === 1){ 
    clearInterval(this.interval);
  }
}

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

startTimer(){
  this.interval = setInterval(
    () => this.setState((prevState)=> ({ timer: prevState.timer - 1 })),
    1000
  );
}

render() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', }}>
      <Text> {this.state.timer} </Text>
      <Button title="Start" onPress={() => this.startTimer() } />
    </View> 
  )
}