使用React Navigation实现模态框时isFocused失效问题咨询

核心问题根因 #

当前的导航结构没有匹配React Navigation 5.x的modal模式的设计前提：

• 你将MyAppNavigator作为顶层Stack的独立路由节点，MyModal作为和它平级的独立路由，对顶层Stack来说二者是无层级关联的普通跳转关系，并不是模态浮层覆盖在业务页面之上的特殊层级关系
• 只要栈结构里存在两个平级的可压栈节点，压栈跳转时一定会给下层节点派发blur事件，触发节点内部所有页面的isFocused状态变更，哪怕上层页面是全透明的，也会触发这套逻辑

你之前自定义Hook失败的本质原因，是在子页面层级拿不到顶层栈的完整路由状态，才会出现“事件没有携带路由标识、无法判断跳转目标”的问题。 #

两种低改动成本的解决路径 #

路径1：调整路由归属匹配官方设计逻辑（零业务代码改动） #

把原本和MyAppNavigator平级放置的MyModal，移到和业务页面同一个Stack实例下。
当普通业务路由和模态路由处于同一个栈内时，React Navigation 5.x会自动触发modal模式的特殊逻辑：检测到上层路由是透明背景的模态页时，不会给下层的业务页面派发blur事件，保持下层页面的focus状态不被打断。
调整后的路由结构参考：

const RootStack = createStackNavigator();
function RootNavigation() {
  return (
    <RootStack.Navigator 
      mode="modal" 
      screenOptions={{ cardStyle: { backgroundColor: 'transparent' } }}
    >
      {/* 原本在MyAppNavigator内部的业务路由 */}
      <RootStack.Screen name="SomeScreen" component={SomeScreen} />
      <RootStack.Screen name="SomeScreen2" component={SomeScreen2} />
      {/* 原本平级放置的MyModal，挪到同一个栈内 */}
      <RootStack.Screen 
        name="MyModal" 
        component={MyModal} 
        options={{ cardStyle: { backgroundColor: 'transparent' } }}
      />
    </RootStack.Navigator>
  )
}

调整后不需要改动任何现有业务里的isFocused判断逻辑，就能消除打开模态时意外触发的blur副作用。

路径2：自定义业务级聚焦判断（完全不改动现有导航结构） #

如果已经完成存量导航的拆分、不想大规模调整路由挂载关系，可以写自定义Hook替代原生的useIsFocused，自己定义“真正的业务失焦”判断逻辑：

• 先维护一个全局的模态路由名称集合，把所有透明模态页的名字存在集合里
• 监听原生的focus/blur事件，收到blur回调时，通过导航实例内置的getState()方法实时读取当前栈顶的路由名称
• 如果栈顶路由属于模态集合，说明是被透明模态盖住，不算真正的业务失焦，保持isFocused为true
• 如果栈顶路由是普通业务页面，才算真正失焦，执行原本的blur逻辑
  兼容你当前版本的自定义Hook参考实现：

import { useNavigation, useIsFocused } from '@react-navigation/native';
import { useState, useEffect } from 'react';

// 维护所有透明模态的路由名，按需增减
const MODAL_ROUTE_WHITELIST = new Set(['MyModal']);

export function useBusinessIsFocused() {
  const navigation = useNavigation();
  const nativeFocused = useIsFocused();
  const [businessFocused, setBusinessFocused] = useState(nativeFocused);

  useEffect(() => {
    // 收到原生blur事件时做拦截
    const unsubscribeBlur = navigation.addListener('blur', () => {
      const currentState = navigation.getState();
      const topRoute = currentState.routes[currentState.routes.length - 1];
      // 栈顶是模态页，不触发真正的失焦
      if (MODAL_ROUTE_WHITELIST.has(topRoute.name)) {
        setBusinessFocused(true);
        return;
      }
      // 栈顶是普通业务页，执行正常失焦逻辑
      setBusinessFocused(false);
    });

    // 收到原生focus事件时恢复聚焦
    const unsubscribeFocus = navigation.addListener('focus', () => {
      setBusinessFocused(true);
    });

    return () => {
      unsubscribeBlur();
      unsubscribeFocus();
    };
  }, [navigation]);

  return businessFocused;
}

后续新增其他透明模态页时，只需要把对应的路由名加到白名单集合里即可，不需要改动其他业务逻辑。 #

补充注意事项 #

• 因为MyModal是透明背景，需要给组件根节点加pointerEvents="box-none"，让模态空白区域的触摸事件可以穿透到下层业务页面，符合原生模态的交互逻辑
• 如果在平级结构下使用自定义Hook，不需要在顶层导航器上手动监听state事件，只需要在页面收到blur回调时实时拉取栈状态即可，完全可以避开“子页面监听不到state事件”的问题

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