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

Question

我在简单屏幕的底部添加了按钮，我想在按下按钮时滚动到顶部。将什么代码添加到按钮 onPress？请提出任何解决方案，在此先感谢。

Answer 1

我假设您在页面上使用 ScrollView，因为只要在底部按下按钮，您就想滚动到顶部。在这种情况下，您可以使用 ScrollView 的 scrollTo({x: 0, y: 0, animated: true}) 方法。您可以像这样在 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>
 )
}

基本上，您必须创建一个对您的 scrollView 的引用（ref），然后您可以在您的代码中的任何地方调用它的方法。

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

Answer 2

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

1.Define 全局功能组件：- const 滚动 = React.createRef();

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

3.Finally，点击添加：- scroll.current.scrollTo(0); // 将在 y 位置 0

滚动到顶部

Answer 3

// const 滚动 = React.createRef();

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

const 滚动 = React.useRef();

这在我的案例中有效。

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

How can i scroll top on onPress of button in react-native?

scroll

button

react-native

onpress