Question

现在我使用间隔让它成真，但它是非常不连贯的。如果我可以改变方法（scroll）的速度，那就太好了。

this.interval = setInterval(()=>{
    if(!_scroll){
        _this.interval && clearInterval(_this.interval);
    }
    if(totalWide+ScreenWidth >= width ){
        _scroll.scrollWithoutAnimationTo();
        totalWide=0;
        i=0;
    }else{
        _scroll.scrollTo({x:eachWide*i,animate:true});
        totalWide = totalWide + eachWide;
        i= i+1;
    }
},250)

Answer 1

使用ScrollView的decelerationRate属性

<ScrollView decelerationRate={0.5}>

</ScrollView>

Answer 2

我通过让setInterval调用一个函数（您在其中定义了滚动条的逻辑或移动速度）来完成这项工作。

this.interval= setInterval(this.scrollwithSpeed, 100); // Set the function to this timer
scrollwithSpeed() {
   position = this.state.currentPosition + x; // x decides the speed and 
   currentPosition is set to 0 initially.         
   this.scrollObject.scrollTo(
   { y: position, animated: true }
   );
   this.setState({ currentPosition: position });
}

确保完成后调用clearInterval（this.interval）。

Answer 3

我建议附加到js requestAnimationFrame（据我所知，React Native支持它的程度）。

下面的示例将从上到下线性滚动。如果您需要使用不同的偏移量，只需更改distance变量即可。

startingPoint变量在从上到下滚动时是多余的，但将保留在示例中。

scroll() {
  if (this.scrollAnimationFrame) {
    cancelAnimationFrame(this.scrollAnimationFrame);
  }

  this.listRef.scrollToOffset({offset: 0, animated: false}); // remove if You don't start scroll from top

  const duration = this.scrollTime,
        startingPoint = 0, // change if You don't start scroll from top
        distance = Scrolling.LINE_HEIGHT * Scrolling.ITEMS_COUNT;
  let startTimestamp, progress;

  const frameCallback = (timestamp) => {
    if (!startTimestamp) {
      startTimestamp = timestamp;
    }

    progress = timestamp - startTimestamp;

    this.listRef.scrollToOffset({
      offset: distance * (progress / duration) + startingPoint,
      animated: false,
    });

    if (progress < duration) {
      this.scrollAnimationFrame = requestAnimationFrame(frameCallback);
    }
  };

  this.scrollAnimationFrame = requestAnimationFrame(frameCallback);
}

我希望更改scrollview滚动速度in react native

3 个答案: