button - 如何在 react-native 中的 onPress 按钮上滚动顶部？

Question

我已经在简单屏幕的底部添加了按钮，并且每当我按下按钮时我都想滚动顶部。什么代码添加到按钮 onPress？，请提出任何解决方案，提前谢谢。

Answer 1

我假设您在页面上使用 ScrollView，因为您希望在底部按下按钮时滚动到顶部。在这种情况下，您可以scrollTo({x: 0, y: 0, animated: true})使用ScrollView. 您可以在 render 方法之前调用一个函数，如下所示：

goToTop = () => {
   this.scroll.scrollTo({x: 0, y: 0, animated: true});
}
render() {
 return (
  <ScrollView
    ref={(c) => {this.scroll = c}}
  >
    // [rest of your code here...]
    <Button title='Go To Top' onPress={this.goToTop} />
  </ScrollView>
 )
}

基本上，你必须为ref你的scrollView创建一个reference()，然后你可以在你的代码中的任何地方调用它的方法。

如果您不使用 ScrollView，而是使用 Flatlist 组件，它还有一个通过其refs 公开的方法，称为 scrollToOffset()。

Answer 2

在 React Native 的功能组件中，需要做以下事情才能在 ScrollView 中滚动 Top-

1.在功能组件中全局定义：- const scroll = React.createRef();

2. 然后，在 ScrollView 中添加 :- ref={scroll}。

3.最后，点击添加：-scroll.current.scrollTo(0); // 将滚动到 y 位置 0 的顶部

Answer 3

// 常量滚动 = React.createRef();

如果你得到 scroll.current 为 Null 的错误，那么试试这个

常量滚动 = React.useRef();

这在我的案例中有效。