如何通过点击 react native 中的 touchableOpacity 来开始倒计时？

Question

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

最近发现了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> 
  )
}

如何通过点击 react native 中的 touchableOpacity 来开始倒计时？

How to start a countdown by clicking on a touchableOpacity in react native?

function

countdowntimer

react-native

touchableopacity

onpress