reactjs - react 导航: Scroll to top if tab is the same as active tab

Question

我有一个基于选项卡的应用程序。如果我当前位于第一个选项卡上，一直向下滚动，然后再次单击该选项卡，我希望它滚动到顶部。这可能吗？

我知道我应该有一个带有引用的 ScrollView ，然后使用 this._scrollView.scrollTo(0)，但是如何检测用户何时点击选项卡栏并确定它是否是相同的选项卡？

Answer 1

对于正在寻找React Native解决方案的人来说，如果您正在使用React导航，则需要从React-Navigation而不是React-Native导入ScrollView、FlatList或SectionList。

例如。

import { FlatList } from 'react-navigation';

您可以在文档中找到详细信息:https://reactnavigation.org/docs/4.x/scrollables/

更新

如果您使用的是 React 导航 v5

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

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

  useScrollToTop(ref);

  return <FlatList ref={ref} {/* settings */} />;
}

文档:https://reactnavigation.org/docs/use-scroll-to-top