react-navigation 4.x点击tabBar标签时如何实现屏幕滚动到顶部

你的思路是正确的，整体逻辑就是通过tabBarOnPress触发对应页面的滚动方法，分两步实现即可：

1. 标签页暴露滚动到顶部的方法 #

在每个标签页的滚动组件（ScrollView/FlatList等）绑定ref，将滚动到顶部的方法通过navigation.setParams挂载到当前路由的参数中：

// 函数组件示例
import React, { useRef, useEffect } from 'react';
import { ScrollView } from 'react-native';

const DemoTabScreen = ({ navigation }) => {
  const scrollRef = useRef(null);

  useEffect(() => {
    // 挂载滚动方法到路由参数
    navigation.setParams({
      scrollToTop: () => {
        // ScrollView写法
        scrollRef.current?.scrollTo({ y: 0, animated: true });
        // FlatList写法替换为下面这行
        // scrollRef.current?.scrollToOffset({ offset: 0, animated: true });
      }
    });
  }, [navigation]);

  return <ScrollView ref={scrollRef}>{/* 页面内容 */}</ScrollView>
};

如果是类组件，把上述逻辑放到componentDidMount生命周期中执行即可。

2. 配置tabBarOnPress触发滚动 #

在createMaterialTopTabNavigator的全局配置中添加tabBarOnPress逻辑，点击标签时触发对应页面的滚动方法：

import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

const TopTabs = createMaterialTopTabNavigator(
  {
    Tab1: Tab1Screen,
    Tab2: Tab2Screen,
    Tab3: Tab3Screen
  },
  {
    defaultNavigationOptions: () => ({
      tabBarOnPress: ({ navigation: tabNav, defaultHandler }) => {
        // 先执行默认的标签切换逻辑
        defaultHandler();
        // 获取当前点击标签对应的路由参数中的滚动方法
        const activeRoute = tabNav.state.routes[tabNav.state.index];
        const scrollToTop = activeRoute.params?.scrollToTop;
        typeof scrollToTop === 'function' && scrollToTop();
      }
    })
  }
);

可选优化 #

如果需要实现「重复点击当前激活态标签也触发滚动到顶部」的效果，只需要在tabBarOnPress中添加激活态判断即可，无需修改其他逻辑。

内容的提问来源于stack exchange，提问作者Dazza