时间戳

首页 > 解决方案 > react-native 完成后如何更新进度和执行代码

reactjs - react-native 完成后如何更新进度和执行代码

问题描述

我对 react-native 真的很陌生。我正在尝试创建一个带有进度指示器的按钮，并希望在进度完成时执行一些代码。不知何故，我使用以下代码实现了所需的行为，

反应组件

class ProgressButton extends Component {
  constructor() {
    super();
    this.state = {
      progress: 100,
    };
    this.progressTimer = null;
  }

  componentDidMount() {
    this.progressTimer = setInterval(() => {
      if(this.state.progress === 0) {
        clearInterval(this.progressTimer);
        // Run code on completion
      }
      this.setState({progress: this.state.progress - 1})
    }, 100)
  }

  render() {
    return (
      <button style={{backgroundPosition: this.state.progress + '%'}}>
        Hello
      </button>
    );
  }
}

CSS

button {
  font-size: 16px;
  width: 70px;
  height: 30px;
  border-radius: 4px;
  border: none;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, black 50%, grey 50%);
  color: white;
  background-position: 100% 0;
}

但我对这个解决方案不满意，因为，

  1. 进度动画不流畅。
  2. 我不认为使用setInterval()是一个好主意。

我考虑过对 CSS@keyframes动画做同样的事情并setTimeout()在完成时执行代码。但我也不确定，因为它可能不同步。

有一个更好的方法吗？

标签： reactjsreact-native

解决方案

为此，您需要使用动画创建自己的自定义组件

你可以使用这个包或者你需要按照这篇文章

推荐阅读