在React Native中延迟setState

时间:2018-08-29 16:50:53

标签: javascript react-native

在我的应用程序中,它具有刷新组件的功能。因此,我使用了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 });

2 个答案:

答案 0 :(得分:0)

尝试做这样的事情:

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

答案 1 :(得分:0)

来自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
}