React Navigation：如何检测已聚焦屏幕被再次调用？

focus监听器仅在屏幕从失焦状态切换到聚焦状态时触发，当你已经处于目标屏幕并再次跳转至该屏幕时，不会触发这个事件。针对你的场景，提供以下两种可行方案：

方案一：监听路由参数变化（类组件适配） #

当你调用navigation.navigate('Home', { data: 'Logout' })跳转到当前屏幕时，React Navigation会更新该屏幕的route.params。你可以通过componentDidUpdate生命周期监听参数变化，执行对应逻辑：

componentDidMount() {
  this.subscribeFocusHomeScreen = this.props.navigation.addListener('focus', () => {
    this.handleLogoutCheck();
  });
}

componentDidUpdate(prevProps) {
  // 检测路由参数是否发生变化
  if (this.props.route.params !== prevProps.route.params) {
    this.handleLogoutCheck();
  }
}

componentWillUnmount() {
  // 移除监听器避免内存泄漏
  this.subscribeFocusHomeScreen();
}

// 提取重复逻辑为单独方法
handleLogoutCheck = () => {
  const logmeout = this.props.route.params?.data || '';
  if (logmeout === 'Logout') {
    this.popOutToastMsg();
    this.removeTimerFromNavHeader();
    this.cancelAllSubscriptions();
    this._logOutHandler();
    this.props.navigation.navigate('Login');
  }
};

方案二：修改侧边栏跳转逻辑，手动触发处理 #

在侧边栏的跳转事件中，先判断当前活跃屏幕是否为目标屏幕。如果是，直接调用目标屏幕的处理函数；否则正常跳转：

1. 首先在Home屏幕中定义处理方法：

handleLogoutLogic = () => {
  this.popOutToastMsg();
  this.removeTimerFromNavHeader();
  this.cancelAllSubscriptions();
  this._logOutHandler();
  this.props.navigation.navigate('Login');
};

2. 在侧边栏组件中，通过导航引用判断当前路由并执行对应操作：

// 假设你已创建导航引用（navigationRef）
const handleNavigateToHome = () => {
  const currentRouteName = navigationRef.current.getCurrentRoute().name;
  if (currentRouteName === 'Home') {
    // 调用Home屏幕的处理方法（需通过ref获取屏幕实例）
    homeScreenRef.current?.handleLogoutLogic();
  } else {
    navigationRef.current.navigate('Home', { data: 'Logout' });
  }
};

注：使用屏幕实例ref时，需要在Home组件中创建ref并暴露：

// Home组件中
homeScreenRef = React.createRef();

componentDidMount() {
  homeScreenRef.current = this;
}

componentWillUnmount() {
  homeScreenRef.current = null;
}

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