跳转其他页面后返回主页时如何自动关闭已打开的Modal模态框

问题根因 #

你当前使用的React Navigation栈导航默认不会在跳转新页面时卸载旧页面，主页只是被压入路由栈底，所以isModalVisible的状态会被保留。
你之前写的useEffect依赖navigation不会触发重复执行，因为navigation对象的引用在组件的整个生命周期内不会发生变化，该effect只会在组件首次挂载时执行1次，返回主页时不会触发状态修改。

解决方法 #

方法1：监听页面聚焦事件（推荐） #

通过监听导航的focus事件，每次页面切回获得焦点时自动关闭模态框，代码修改如下：

useEffect(() => {
  // 注册聚焦监听事件
  const unsubscribe = navigation.addListener('focus', () => {
    setIsModalVisible(false);
  });
  // 组件卸载时移除监听，避免内存泄漏
  return unsubscribe;
}, [navigation]);

该方案适配所有跳转场景，不需要额外修改其他跳转逻辑。

方法2：跳转前手动关闭模态框 #

直接修改模态框内的跳转逻辑，跳转新页面前主动关闭模态框：

// 模态框组件内的保存按钮逻辑修改
<TouchableOpacity onPress={() => {
  toggleModal();
  navigation.navigate("AddBookScreen");
}}>
  <Text>{save}</Text>
</TouchableOpacity>

该方案更轻量化，适合跳转出口少的场景。

方法3：使用useFocusEffect钩子（React Navigation 6+） #

如果是React Navigation 6及以上版本，可以使用官方提供的useFocusEffect钩子处理聚焦副作用，写法更简洁：

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

// 主页内添加这段逻辑
useFocusEffect(
  useCallback(() => {
    setIsModalVisible(false);
  }, [])
);

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