React Navigation Tab Navigator离开屏幕时添加回调的实现方法

当然有办法实现！从你给出的TabNavigator代码来看，你用的应该是React Navigation v3/v4版本，我给你两种实用的方案来达成需求：

方案1：在单个屏幕组件内监听blur事件 #

这是最灵活的方式，针对每个屏幕单独处理离开时的逻辑。因为TabNavigator默认会缓存屏幕实例，切换标签时不会卸载组件，所以componentWillUnmount这类生命周期钩子不会触发——我们需要用React Navigation提供的blur事件，它会在屏幕失去焦点（也就是被切换离开）时触发。

类组件写法 #

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Home extends Component {
  componentDidMount() {
    // 订阅blur事件
    this.unsubscribeBlur = this.props.navigation.addListener('blur', () => {
      // 这里写你要执行的业务逻辑
      console.log('用户离开Home标签页了');
      // 比如保存表单数据、清理临时状态、上报埋点等
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消订阅，避免内存泄漏
    this.unsubscribeBlur();
  }

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

函数组件写法（React Hooks） #

如果你的屏幕是函数组件，用useEffect来处理订阅和取消：

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const Notifications = ({ navigation }) => {
  useEffect(() => {
    const unsubscribe = navigation.addListener('blur', () => {
      // 离开Notifications时的业务逻辑
      console.log('用户离开Notifications标签页了');
    });

    // 组件卸载时自动执行这个函数取消订阅
    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      <Text>Notifications Screen</Text>
    </View>
  );
};

方案2：全局监听标签页切换（统一处理所有屏幕） #

如果你想对所有标签页的切换做统一逻辑处理，可以在根导航器外层包装一个组件，监听导航状态变化：

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';

const RootNavigator = TabNavigator({
  Home: { /* 你的Home配置 */ },
  Notifications: { /* 你的Notifications配置 */ },
}, { /* 导航器样式等配置 */ });

class AppNavigator extends Component {
  componentDidMount() {
    this.unsubscribeState = this.props.navigation.addListener('state', (state) => {
      // 获取当前活跃的路由，对比上一次的路由判断哪个屏幕被离开
      const currentRouteName = state.routes[state.index].routeName;
      // 用变量存储上一次的路由名称
      if (this.prevRouteName && this.prevRouteName !== currentRouteName) {
        console.log(`离开${this.prevRouteName}，进入${currentRouteName}`);
        // 根据离开的路由执行对应逻辑
        if (this.prevRouteName === 'Home') {
          // Home离开时的逻辑
        } else if (this.prevRouteName === 'Notifications') {
          // Notifications离开时的逻辑
        }
      }
      this.prevRouteName = currentRouteName;
    });
  }

  componentWillUnmount() {
    this.unsubscribeState();
  }

  render() {
    return <RootNavigator />;
  }
}

关键提醒 #

• 绝对不要依赖componentWillUnmount来处理离开逻辑！TabNavigator默认会缓存组件，切换标签时不会卸载屏幕，这个钩子不会触发。
• 一定要记得取消事件订阅，否则会造成内存泄漏，影响应用性能。

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