React Native - 在 UI 中更新进度

Question

我正在尝试在 React Native javascript 中处理一些数据，同时在 UI 中显示进度百分比。天真的实现是这样的：

readData(){
  let i=0
  let len = elements.length
  for (; i < len; i++){
    this.setState({progress:i/len});
    this.process(elements[i]) // take some time
  }
}

这当然行不通，因为 React Native 会批处理所有 setstate 调用并调用最后一个。

有人知道它应该如何工作吗？

谢谢！

Answer 1

如果你想在进度之后更新状态，你需要使用回调或 Promise。

例子

process(element, index, callback) {
  setTimeOut(() => {
    // some functions
    if(callback && typeof callback === 'function') callback();
  }, (10000* index))
}

readData(){
  let i=0
  let len = elements.length
  for (; i < len; i++){
    this.process(elements[i], i, () => {
      const progress = i/len;
      this.setState({progress});
    });
  }
}

React Native - 在 UI 中更新进度

react native - updating progress in the UI

setstate

react-native