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

Posted 2023-02-21

【中文标题】如何重置抽屉导航器打开的屏幕状态？

【英文标题】：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')。我应该采取哪些不同的措施来获得这种行为？

【参考方案1】：

使用useFocus 代替useEffect。