React Navigation v5不会重置和删除以前的路线

时间:2020-02-29 14:57:23

标签: react-native react-navigation-v5

我有一个登录屏幕,该屏幕已放在堆栈中。用户成功登录后,他将被重定向到主屏幕,即抽屉屏幕。抽屉屏幕的选项之一是注销,因此单击该用户时应注销。以下是我的注销屏幕代码。我只是在ui中显示注销屏幕的进度条,但是在useEffect钩子中,我正在调用以下方法

navigation.navigate({index: 0, routes: [{name: LOGIN_SCREEN}]});

但是我收到一条错误消息,说You need to specify name or key when calling navigate with an object as the argument,我被重定向到主屏幕。当我完全重新启动应用程序时,只有它进入登录屏幕。我正在为名称键传递正确的值。

我的导航堆栈看起来如下

 <Stack.Navigator>

      <Stack.Screen
        name={LOGIN_SCREEN}
        component={LoginScreen}
        options={{headerShown: false}}
      />
     <Stack.Screen
        name={HOME_STACK_SCREEN}
        component={DrawerStack}
        options={{headerShown: false}}
      />...

我的抽屉组件如下

<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={Home}
        options={{
         ...
        }}
      />
     <Drawer.Screen
        name={LOGOUT_SCREEN}
        component={Logout}
        options={{
         ...
        }}
      />

2 个答案:

答案 0 :(得分:9)

在react-navigation v5中。您可以像这样重置导航

import { CommonActions } from "@react-navigation/native";

this.props.navigation.dispatch(
     CommonActions.reset({
        index: 0,
        routes: [{ name: "LOGIN_SCREEN" }],
    })
);

答案 1 :(得分:4)

如果要重置,则需要使用reset,而不是navigate

navigation.reset({
  routes: [{ name: LOGIN_SCREEN }]
});