React Navigation Material Top Tabs Navigator 如何监听滑动切换回调事件？

方案1：透传底层tabView的切换回调 #

Material Top Tabs Navigator底层基于react-native-tab-view实现，可通过tabViewProps属性直接透传滑动切换的回调事件，点击tab和滑动切换都会触发该回调：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  const handleTabSwitch = (index) => {
    // index为切换后tab的索引，在此处执行自定义逻辑，比如修改背景色
    console.log('当前切换到的tab索引：', index);
  }

  return (
    <Tab.Navigator
      tabViewProps={{
        onIndexChange: handleTabSwitch
      }}
      {/* 其余你原有配置项，比如swipeEnabled、tabBarOptions等 */}
    >
      {/* 你的Tab页面配置 */}
    </Tab.Navigator>
  )
}

该方案逻辑集中，不需要在每个Tab页面单独添加代码，优先推荐使用。

方案2：在Tab页面内监听focus事件 #

你之前监听无响应是因为监听位置不对，将focus监听逻辑放到每个Tab对应的页面组件内，滑动切换到对应页面时就会触发：

// 单个Tab页的类组件示例
class TabPage extends React.Component {
  componentDidMount() {
    this.unsubscribe = this.props.navigation.addListener('focus', () => {
      // 页面被激活时触发，滑动、点击tab进入都会执行
      console.log('当前页面已激活');
      // 执行你的自定义逻辑
    });
  }

  componentWillUnmount() {
    // 组件卸载时移除监听避免内存泄漏
    this.unsubscribe();
  }
}

如果是函数组件，可使用useFocusEffect更便捷实现：

import { useFocusEffect } from '@react-navigation/native';

function TabPage() {
  useFocusEffect(
    React.useCallback(() => {
      console.log('当前页面已激活');
      // 执行自定义逻辑
      return () => {
        // 页面失焦时的清理逻辑，按需添加
      };
    }, [])
  );
}

方案3：监听导航容器状态变化 #

在根级NavigationContainer组件上添加onStateChange回调，所有导航状态变化（包括tab滑动切换）都会触发，可从中提取当前激活的tab信息：

import { NavigationContainer } from '@react-navigation/native';

function App() {
  const handleNavStateChange = (state) => {
    const topTabState = state.routes[state.index].state;
    const activeTabName = topTabState?.routes[topTabState.index]?.name;
    if (activeTabName) {
      console.log('当前激活的tab页面：', activeTabName);
      // 执行自定义逻辑
    }
  }

  return (
    <NavigationContainer onStateChange={handleNavStateChange}>
      {/* 你的全局导航配置 */}
    </NavigationContainer>
  )
}

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