React Native 中的 Javascript 进度条答案

【问题标题】：Javascript progress bar in React NativeReact Native 中的 Javascript 进度条
【发布时间】：2019-06-27 16:39:36
【问题描述】：

我正在 React Native 中实现类似 Instagram 故事的功能，我需要在顶部实现一个进度条以指示当前故事的进度。目前我有一个计时器，一旦故事开始播放就会开始计数：

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 线程在某些低端设备上很慢，进度条就会变得很垃圾。

有什么建议让它更流畅吗？

【问题讨论】：

JS 是单线程的，但在 RN 中，视图在单独的线程上运行，更不用说 setState 是异步的......问题可能是没有清除 setInterval（例如在 @987654323 @) 这将导致内存泄漏/减慢...
您可以使用 gif 代替动画。这是一种解决方法，但效果很好。

标签： javascript reactjs react-native progress-bar

【解决方案1】：

您可以启动Animated.timing 动画而不是使用 setInterval 来制作与故事持续时间相同的动画吗？如果用户暂停故事，您应该可以在动画上调用 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>
    );
  }
}

【讨论】：