导航到登录屏幕后重置堆栈

Question

我正在制作一个反应的移动应用程序，并且我有一个带有注销按钮的导航抽屉。我知道如何使用props.navigation.navigate('Login')从那里导航到登录屏幕，但是问题是，如果用户执行此操作，他们仍然可以从登录屏幕打开抽屉，然后导航回到其他屏幕之一，或者按背面在Android上按钮。

我想如果用户来自另一个页面，然后禁用"打开抽屉"按钮，我可以在登录屏幕上进行检查，但这似乎有点hacky。我想知道是否有正确的方法，也许是在登录时到达时重置堆栈，我不确定。

Answer 1

您的实现不好。从您提供的细节来看，我认为您的所有页面都仅在一个stack中。我建议您分开身份验证和应用程序堆栈。为此，我强烈建议这样做：https：//reactnavigation.org/docs/en/auth-flow.html

但是重置堆栈：

重置

重置操作擦除整个导航状态并用 几个动作的结果。

• 索引 - 数字 - 必需 - 导航状态路线数组中的活动路线的索引。
• 操作 - 数组 - 必需 - 将替换导航状态的导航操作数组。
• 键 - 字符串或null-可选 - 如果设置，则具有给定键的导航器将重置。如果null，则根导航器将重置。

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

来源：https：//reactnavigation.org/docs/en/stack-actions.html

Answer 2

注销时需要重置导航堆栈

首先定义注销动作

const logoutAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Login' })],
});

然后注销

this.props.navigation.dispatch(logoutAction);