Question

在我的应用程序中，它具有刷新组件的功能。因此，我使用了react-native-pull-to-refresh组件。在该文档的此处，它已提到_refresh已设置为2000延迟。

_refresh: function() {
return new Promise((resolve) => {
  setTimeout(()=>{resolve()}, 2000)
});

但是我想在2000年延迟后重新渲染屏幕。

我想出了什么

_refresh(context) {
let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve()
  }, 2000);
  setTimeout(() => {
     this.updateUI();
     this.setState({ refreshing: true });
 }, 2000);
})

return promise
}

现在，当我向下拉屏幕时，它不会停留2秒（刷新动画不会停留2秒），而是立即隐藏并刷新UI。

问题

我在这里想念什么？如何保持刷新动画2秒钟，然后调用函数this.updateUI();和this.setState({ refreshing: true });

Answer 1

尝试做这样的事情：

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
    reject(new Error("Error!"));
  }, 2000);
promise.then(() => {
  setTimeout(() => {
     this.updateUI();
     this.setState({ refreshing: true });
  }, 2000);
})

Answer 2

来自github中的示例：

_refresh () {
    // you must return Promise everytime
    return new Promise((resolve) => {
      setTimeout(()=>{
        // some refresh process should come here
        this.setState({cards: this.state.cards.concat([this.state.cards.length + 1])})
        resolve(); 
      }, 2000)
    })
  }

看来您可能正在解决承诺，然后尝试做更多...承诺必须在调用更新函数后才能解决。所以我会尝试这样的事情：

_refresh(context) {
  let promise = new Promise((resolve) => {
    setTimeout(() => {
      this.updateUI();
      this.setState({ refreshing: true });
      resolve()
    }, 2000);
  })
  return promise
}

在React Native中延迟setState

2 个答案: