时间戳

首页 > 解决方案 > 如何重置抽屉导航器打开的屏幕状态？

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

问题描述

我有一个路由配置，首先打开一个登录屏幕，用户登录后，他被重定向到主屏幕，配置如下。

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-nativereact-navigationreact-navigation-v5

解决方案

使用useFocus代替 useEffect。

推荐阅读