Question

我正在尝试制作一个ScrollView，它将在一段时间后自动滚动到底部。而是立即滚动到底部。

moveScreen = () =>{
this.scrollViewRef.flashScrollIndicators();
this.scrollViewRef.scrollToEnd({duration: 5000, animated: true});}

setScrollViewRef = (element) => {
this.scrollViewRef = element;};

render(){
return (
  <View style={{height:'100%', width:'100%',flexDirection:'row'}}>
    <ScrollView ref={this.setScrollViewRef} style={{height:'100%',width:'90%'}} onContentSizeChange={()=> this.moveScreen()}>
      {balloonList}
    </ScrollView>
    <View style={{height:'100%',width:'10%',justifyContent:'flex-end',}}>{bucketList}</View>
  </View>
);}

Answer 1

如果您正在iOS设备上测试此实现的功能，则无法添加duration选项，无论传递什么值，该选项都将立即滚动到末尾。

对于Android，您可以指定持续时间，例如scrollToEnd（{duration：500}）进行持续时间滚动。

有关更多信息，请参阅文档：https://reactnative.dev/docs/scrollview#scrolltoend

编辑：

事实证明，此功能实际上已准备好交付，但最终破坏了一些内部呼叫站点，最终被还原，但是文档仍然提到了该功能。

https://github.com/facebook/react-native/pull/22884#issuecomment-510846680

Answer 2

而是尝试将setTimeout与所需的持续时间结合使用，这样可以实现。

setTimeout(() => this.scrollViewRef.scrollToEnd({duration: 500, animated: true}) , 1000);

这是我的时间1000毫秒，您可以随时提供。希望它清楚，否则请提出任何疑问。

React Native ScrollView scrollToEnd（{duration：5000}）不起作用-Android

2 个答案: