如何重置Drawer Navigator打开的页面状态，实现每次进入重新执行接口请求

问题原因 #

React Navigation 的 Drawer 导航默认会把加载过的页面保存在内存中不会销毁，你从 InfoUser 返回首页时 InfoUser 页面只是失焦没有卸载，所以空依赖的 useEffect 只会在首次挂载时执行一次，后续进入不会重新触发。

方案1：使用useFocusEffect（最推荐）

这是 React Navigation 官方提供的专门用于页面聚焦时执行逻辑的钩子，每次页面获得焦点都会自动执行回调：

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

function InfoUser() {
  // 用 useCallback 包裹避免不必要的重复执行
  useFocusEffect(
    useCallback(() => {
      // 这里放你原来要在 useEffect 里执行的请求逻辑
      const fetchUserData = async () => {
        // 发起服务端请求
      };
      fetchUserData();

      // 可选：如果需要在页面失焦时做清理操作，在这里返回清理函数
      return () => {
        // 比如取消请求、清空订阅等
      };
    }, [])
  );

  // 其余页面逻辑
}

这个方案的优势是性能开销小，不需要销毁页面，只在聚焦时执行需要的逻辑。

方案2：配置页面失焦自动卸载（改动最小）

直接在 Drawer 导航的 InfoUser Screen 配置中加unmountOnBlur: true，页面离开时会自动销毁，下次进入会重新挂载，你原来的 useEffect 不需要改就能生效：

export default function HomeRoutes() {
  return (
    <Navigator>
      <Screen name="Home" component={Home}/>
      <Screen 
        name="InfoUser" 
        component={InfoUser}
        options={{ unmountOnBlur: true }} // 新增这一行配置
      />
    </Navigator>
  );
}

注意这个方案适合 InfoUser 页面逻辑简单的场景，如果页面复杂度高，每次重新挂载可能会有轻微的性能损耗。

方案3：手动监听focus事件

如果你不想用useFocusEffect，也可以在原有 useEffect 里监听页面聚焦事件实现相同效果：

import { useEffect } from 'react';

function InfoUser({ navigation }) {
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // 这里放请求逻辑
      fetchUserData();
    });

    // 组件卸载时移除监听
    return unsubscribe;
  }, [navigation]);

  // 其余逻辑
}

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