useScrollToTop

可滚动组件的预期原生行为是响应来自导航的事件，这些事件将在点击活动标签时滚动到顶部，就像您从原生标签栏中预期的那样。

为了实现它，我们导出 useScrollToTop，它接受可滚动组件的 ref（例如 ScrollView 或 FlatList）。

示例

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';

function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}

与类组件一起使用

您可以将类组件包装在函数组件中以使用钩子

class Albums extends React.Component {
  render() {
    return <ScrollView ref={this.props.scrollRef}>{/* content */}</ScrollView>;
  }
}

// Wrap and export
export default function (props) {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return <Albums {...props} scrollRef={ref} />;
}

提供滚动偏移量

如果您需要滚动位置的偏移量，您可以包装和装饰传递的引用

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';

function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(
    React.useRef({
      scrollToTop: () => ref.current?.scrollTo({ y: 100 }),
    })
  );

  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}