Expo Router：关闭模态框后手势返回栈页面时屏幕冻结

方案1：手动清理残留的调光视图 #

在模态框关闭的回调（比如onDismiss或动画结束钩子）里，主动处理_UIParallaxDimmingView：

• 加个小延迟（等模态动画完成），然后遍历视图层级找到这个调光视图，直接隐藏或移除。可以用React Native的UIManager或相关工具操作：

import { findNodeHandle, UIManager } from 'react-native';

const handleModalClose = () => {
  setTimeout(() => {
    // 拿到当前页面的根节点引用
    const rootNode = findNodeHandle(/* 你的页面根组件ref */);
    if (rootNode) {
      // 通过UIManager遍历子视图，找到_UIParallaxDimmingView后设置隐藏
      // 也可以用react-native-root-view类工具直接操作根视图下的对应元素
    }
  }, 300);
};

方案2：自定义跨栈复用的模态组件 #

放弃使用原生模态，自己实现带手势关闭的模态：

• 用Animated实现滑入滑出动画，自定义半透明背景替代原生调光层
• 用PanResponder实现左滑关闭的手势逻辑
• 将组件放在共享文件夹中，跨栈调用完全可控，不会出现原生视图残留问题

方案3：触发栈页面强制刷新 #

返回栈页面时，强制触发页面重渲染，可能会触发视图层级更新以清除残留调光视图：

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

const ChildStackScreen = () => {
  const [forceUpdate, setForceUpdate] = useState(false);

  useFocusEffect(
    useCallback(() => {
      setForceUpdate(prev => !prev);
    }, [])
  );

  return (/* 页面内容 */);
};

这个方案操作简单，可先测试是否生效，无效再尝试其他方案。

内容的提问来源于stack exchange，提问作者D. Patrick