如何重置抽屉导航器打开的屏幕状态？答案

【问题标题】：How to reset the state of a screen that was opened by the drawer navigator?如何重置抽屉导航器打开的屏幕状态？
【发布时间】：2021-11-22 18:16:24
【问题描述】：

我有一个路由配置，先打开一个登录界面，用户登录后重定向到主界面，配置如下。

import { createStackNavigator } from '@react-navigation/stack';
const navigation = useNavigation();

export function AppRoutes() {
  return (
    <Navigator>
      <Screen name="Login" component={Login}/>
      <Screen name="HomeRoutes" component={HomeRoutes}/>
    </Navigator>
  );
}

使用抽屉导航器实现了用户登录后重定向的导航。

import { createDrawerNavigator } from '@react-navigation/drawer';
const { Navigator, Screen } = createDrawerNavigator();

export default function HomeRoutes() {
  return (
    <Navigator>
      <Screen name="Home" component={Home}/>
      <Screen name="InfoUser" component={InfoUser}/>
    </Navigator >
  );
}

当用户在“主页”屏幕上并且他第一次导航到“InfoUser”屏幕时，将执行一个 useEffect 请求来自服务器的数据。但是，如果用户返回主屏幕，然后导航回“InfoUser”屏幕，则不会再次执行此 useEffect，屏幕保持与用户第一次导航到该屏幕时离开时相同的状态。我需要每次他进入这个屏幕时，执行这个 useEffect 请求。对于导航，我使用navigation.navigate('InfoUser')。我应该采取哪些不同的措施来获得这种行为？

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

使用useFocus 代替useEffect。

【讨论】：