React Native中的Javascript進度欄

Question

我正在React Native中實現類似Instagram story的功能，我需要在頂部實現進度條以指示當前故事的進度。 目前，我有一個計時器，一旦故事開始播放，該計時器便開始計時：

onStart = (timeout: number, total: number) => {
    const updateFrequncy = 1000 / PROGRESS_BAR_TICK;
    this._timer = this.props.setInterval(() => {
        this.setState(state => ({
            progress:
                state.progress +
                (PROGRESS_BAR_SPEED * PROGRESS_BAR_RANGE * updateFrequncy) /
                    total,
        }));
    }, PROGRESS_BAR_TICK);
};

我正在將進度狀態傳遞到進度欄。 （一個Animated.View組件，將當前進度呈現為樣式的寬度）。 因此，基本上，由於setState，它將每隔PROGRESS_BAR_TICK毫秒渲染一次。 我面臨的問題是-由於JS是單線程的，因此，如果有另一個事件占用了該線程，或者在某些低端設備上JS線程運行緩慢，進度條將變得混亂。

有什么建議可以使其更流暢嗎？

Answer 1

除了使用setInterval之外，您還可以啟動Animated.timing動畫來為故事設置相同的持續時間嗎？ 如果用戶暫停該故事，則您應該能夠在動畫上調用stop()使其停止，然后以預期的剩余持續時間再次恢復該故事。

另外，我建議不要在進度條上使用scaleX或translateX ，它可以完全在本機線程上運行，而不是設置進度條的寬度。

這是一個部分示例，缺少觸發onStart和onPause的方式，因為我不確定其余組件的外觀。

class Thing {
  _progressValue = new Animated.Value(0);

  onStart = (duration: number) => {
    this._animation = Animated.timing(this._progressValue, {
      duration: duration,
      toValue: 100,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  onPause = () => {
    if (this._animation != null) this._animation.stop();
  };

  render() {
    return (
      <View style={{width: 100, height: 5, backgroundColor: 'green'}}>
        <Animated.View style={{width: 100, height: 5, backgroundColor: 'red', transform: [{translateX: this._progressValue}]}} />
      </View>
    );
  }
}