Question

我在简单的屏幕上添加了按钮，每当我按下按钮时我都要滚动Bottom。什么代码添加到按钮onPress？

render() {
 return (
  <ScrollView>
   {this.yourComponents()}
   <Button>Scroll To Bottom </Button>
  </ScrollView>
  )
}

Answer 1

您可以使用ref执行此操作。

render() {
 return (
  <ScrollView ref={scrollView => this.scrollView = scrollView}>
   {this.yourComponents()}
   <Button onPress={() => {this.scrollView.scrollToEnd()}}>Scroll To Bottom </Button>
  </ScrollView>
  )
}

Answer 2

这个问题与one非常相似，但并不完全相同，这就是我提供答案的原因。

ScrollView提供了一种ScrollTo()方法，可让您滚动到滚动视图中的x / y位置。

let _scrollViewBottom

<ScrollView
    ref='_scrollView'
    onContentSizeChange={(contentWidth, contentHeight)=>{
    _scrollViewBottom = contentHeight;
    }}>
</ScrollView>

然后使用滚动视图的引用名称，如

this.refs._scrollView.scrollTo(_scrollViewBottom);

此外，如果您的目标是经常推送新数据并在滚动视图的末尾滚动，则可能需要查看react-native-invertible-scroll-view。

InvertibleScrollView是一个React Native滚动视图，可以反转，以便从底部开始呈现内容，用户必须向下滚动才能显示更多内容。这是聊天应用程序中的常见设计

Answer 3

对于功能组件

<ScrollView
  ref={ref => { scrollView = ref }}
  onContentSizeChange={() => scrollView.scrollToEnd({ animated: true })}
>
  ...
</ScrollView>

对于类组件

<ScrollView
  ref={ref => { this.scrollView = ref }}
  onContentSizeCange={() => this.scrollView.scrollToEnd({ animated: true })}
>
  ...
</ScrollView>

Answer 4

  let _scrollViewBottom
    
    <ScrollView
        ref={scrollViewRef}
        onContentSizeChange={(contentWidth, contentHeight)=>{
        _scrollViewBottom = contentHeight;
// this make move  your  scroll
        scrollViewRef.current.scrollTo({x:0,y:_scrollViewBottom ,animated:true});
        }}>
    </ScrollView>

此外，如果您的目标是频繁推送新数据并在滚动视图末尾滚动，您可能需要查看 react-native-invertible-scroll-view。

InvertibleScrollView 是一个 React Native 滚动视图，可以反转，以便从底部开始呈现内容，用户必须向下滚动才能显示更多内容。这是聊天应用中常见的设计

如何在react-native中按下onPress按钮？

4 个答案: