反应导航：如果选项卡与活动选项卡相同，则滚动到顶部

Question

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

我知道我应该有一个带有引用的滚动视图，然后使用this._scrollView.scrollTo(0)，但是如何检测用户何时点击标签栏并确定它是否是同一个标签？

Answer 1

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

例如。

import { FlatList } from 'react-navigation';

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

更新

如果您使用的是反应导航 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

Answer 2

您可以按如下方式创建标签导航器：

const TabNav = TabNavigator({
   // config
},
{
   navigationOptions: ({ navigation }) => ({
        tabBarOnPress: (scene, jumpToIndex) => {
            // Called when tab is press
        },
    }),
});

为了滚动到顶部，您可以查看此解决方案：

1. https://github.com/react-navigation/react-navigation/issues/2955#issuecomment-343422076
2. https://snack.expo.io/HJp9mEQkG

Answer 3

反应导航 5.x

他们提供的最简单的解决方案是，只需将可滚动组件的 ref 传递给他们的useScrollToTop钩子。

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>;
}

Snack.expo.io 示例

文档

Answer 4

对于 React navigation 5，只需使用useScrollToTop中的钩子即可@react-navigation/native。他们的文档概述了如何使用它： https: //reactnavigation.org/docs/use-scroll-to-top。

来自他们的文档：

功能组件

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} />;
}

旁注：您可以在任何滚动并有权访问该navigation道具的组件上使用它。例如，您可以在给定屏幕下拥有多个可滚动组件（如果您使用类似的东西react-native-tab-view），这对于它们两个单独来说都可以很好地工作。