导航页面与Modal间存在隐形弹窗Bug问题排查

Bug类型 #

这属于组件状态未清理导致的状态泄漏Bug——跨页面导航时，共享组件的本地状态未被重置，状态残留使得Modal虽在新页面不可见，但实际仍处于打开状态。

问题根源 #

你的Header组件是所有页面共享的（挂载在导航容器外层），通过Modal内按钮跳转页面时，仅切换了导航栈内的页面，Header并未卸载，modalVisible的状态会保留为true。此时Modal被新页面内容覆盖看似隐形，但状态仍处于激活状态，后续操作就会出现异常。

修复方案 #

方案一：导航前主动关闭Modal #

修改Modal内所有导航按钮的回调，先重置Modal状态再导航：

<Pressable style={styles.pressable} onPress={() => {
  setModalVisible(false);
  navigation.navigate('Home');
}}>
  <Text style={styles.textInsideModalPressables}>Home</Text>
</Pressable>

对Profile、Settings、LogInPage的导航按钮做同样修改，确保每次导航都先关闭Modal。

方案二：监听导航事件自动关闭Modal #

用useFocusEffect监听页面焦点变化，在当前页面失去焦点时自动关闭Modal：

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

export default function Header() {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);

  // 页面失去焦点时（导航离开）重置Modal状态
  useFocusEffect(
    React.useCallback(() => {
      return () => {
        setModalVisible(false);
      };
    }, [])
  );

  // 原有组件代码不变...
}

这种方式无需修改每个导航按钮，只要页面切换就自动清理状态，更简洁通用。

原代码问题点 #

原Modal内的导航按钮仅执行页面跳转，未同步重置modalVisible状态，导致共享的Header组件状态残留，引发异常。

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