React Navigation：如果选项卡与活动选项卡相同，则滚动到顶部

Question

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

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

Answer 1

tabBarOnPress 在 navigationOptions 中。处理点击事件的回调；参数是一个对象，包含：

previousScene: { route, index }: 我们要离开的场景。 scene: { route, index } 被点击。可以为您执行导航的 jumpToIndex 方法。

因此在您的情况下，只需使用场景对象来检查按下了哪个选项卡。

在 react navigation documentation 上查看更多信息。

Answer 2

您可以按如下方式创建您的 tab navigator：

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

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

Answer 3

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

例如

import { FlatList } from 'react-navigation';

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

更新

如果您使用的是 react navigation 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 4

React Navigation 5.x

他们提供的最简单的解决方案是，将可滚动组件的引用传递给他们的 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 Example

Documentation

Answer 5

对于 React Navigation 5，只需使用 @react-navigation/native 中的 useScrollToTop 钩子。他们的文档概述了如何在此处使用它：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 组件

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 之类的东西），这对它们两个单独工作都很好。

React Navigation：如果选项卡与活动选项卡相同，则滚动到顶部

React Navigation: Scroll to top if tab is the same as active tab

tabs

scroll

reactjs

react-native

react-navigation