Question

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

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

Answer 1

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

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

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

Answer 2

反应导航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 3

对于反应导航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之类的东西），则这两个组件都可以单独使用。

Answer 4

navigationOptions 中的

tabBarOnPress 。回调处理点击事件;参数是一个包含以下内容的对象：

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

所以在你的情况下，只需使用场景对象来检查按哪个标签。

在react navigation documentation上查看更多内容。

Answer 5

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

例如

import { FlatList } from 'react-navigation';

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

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

5 个答案: