React native button blinking effect

Define the method first


this.state = {
       buttonBackgroundColor: 'green',
       isBlinking: false, // A new status is added to identify whether the button is blinking or not

}




autoStart=()=>{
// 禁用按钮交互
    this.setState({ isAutoSending: true });
    let dt = setInterval(()=>{
          this.init()
         }, 5000);

      this.setState(
          {
            clearTime: dt,
            isBlinking: true, // 设置为true，表示按钮正在闪烁
          },
          () => {
            // 开启闪烁动画
            this.startBlinkAnimation();
          }
        );


    }

 startBlinkAnimation = () => {
    if (this.state.isBlinking) {
      this.setState({ buttonBackgroundColor: 'red' });
      setTimeout(() => {
        this.setState({ buttonBackgroundColor: 'green' });
        setTimeout(this.startBlinkAnimation, 500);
      }, 500);
    }
  };

<Button  color={this.state.buttonBackgroundColor} title={'Start'} onPress={() => !this.state.isAutoSending && this.autoStart()}/>

You can click the button to see the effect.