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

标签 react-native react-navigation-v5

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

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={{
         ...
        }}
      />

最佳答案

在 react 导航 v5.您可以像这样重置导航

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

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

关于react-native - React Navigation v5 不会重置和删除以前的路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60466399/

相关文章:

android - react-native运行Android构建错误-无法解决:com.android.support:appcompat-v7:26.0.2

react-native - 关闭嵌套的堆栈导航器

reactjs - React 导航 5 props.navigation.replace ("component");与 navigation.navigate() 的工作方式相同(后退按钮仍显示在标题中)

react-native - 有没有人在 react native 项目中成功使用 azure-storage 进行 blob 存储?

react-native - 如何在 CustomDrawerContent 中使用 props.navigation.closeDrawer() ?(React Native)("@react-navigation/drawer": "^5.11.4")

reactjs - 在 Jest : NavigationContainer causes console error 中异步测试 React Navigation 5

reactjs - React Navigation "focus"事件监听器不使用更新值

cordova - Native Script 与 react native 和 ionic 框架的区别

css - TextInput 转到页面中间

react-native - 通过 ScrollView 传递触摸事件