代码之家 › 专栏 › 技术社区 › Bruce Lin

React Native中的Javascript进度条

progress-bar react-native reactjs javascript

Bruce Lin · 技术社区 · 7 年前

我在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);
};

我将把进度状态传递给进度条。(将当前进度呈现为样式宽度的动画.View组件)。因此,基本上,它将呈现由于setState而导致的每一个进度条滴答毫秒。我面临的问题是-由于JS是单线程的,如果有另一个事件占用了线程,或者JS线程在一些低端设备上运行缓慢,那么进度条将变得不可靠。

有什么建议让它更光滑吗?

1 回复 | 直到 7 年前

levi 7 年前

与其使用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>
    );
  }
}

推荐文章

SHatna · 带有进度条的Tkinter链接按钮

8 年前

Egor Vasilyev · 进程读取中未显示片段中的ProgressBar

8 年前

Kaarug · 使用服务工作者缓存文件时显示进度

8 年前

Snappysites · 进度条上的边框图像切片效果?

8 年前

ì¤ìí · 重新单击按钮时重置进度条[关闭]

8 年前

Dean Movy · WPF:使用IMultiValueConverter更改进度条颜色

8 年前

Ali AkyÄ±ldÄ±rÄ±m · 将标签值传递给Asp中的进度条值属性。网

8 年前

KissTom87 · 仅在使用ajax上载文件时显示progressbar

8 年前

Ambreen Khan · 使用一个progressbar java/Android下载多个文件

8 年前

bini · 当圆形进度条显示60%时,它没有显示10%的进度

8 年前