如何使用 react-native 在注销时正确卸载所有屏幕？答案

【问题标题】：How to properly unmount all screens on logout using react-native?如何使用 react-native 在注销时正确卸载所有屏幕？
【发布时间】：2020-01-10 18:48:18
【问题描述】：

我正在使用 react-native 和堆栈导航器以及选项卡导航器构建应用程序。导航时屏幕永远不会卸载。我想在用户按下“注销”按钮时卸载屏幕，因此当新用户登录时，所有屏幕都需要重新安装而不保留旧状态。

我该怎么做？在屏幕内使用this.props.navigation.popToTop() 不起作用。

我当前的导航器结构：

App DrawerNavigator -> OnBoard Drawer Navigator --> (SignIn screen, SignUp screen)
                    -> Logged Drawer Navigaror --> Home Tab Navigator
                                               --> Settings Stack Navigator -->(Settings screen)

我正在设置屏幕中调用注销功能。

【问题讨论】：

标签： android ios node.js reactjs react-native

【解决方案1】：

你能试试这个吗？？

import { StackActions } from 'react-navigation'; // before
import { StackActions } from '@react-navigation/native'; // current

this.props.navigation.dispatch(StackActions.popToTop());

【讨论】：

我没有收到任何错误，该函数已执行（我有一个前后的日志）但屏幕上没有变化，我没有转到顶部
我更新了问题，添加了有关导航器一般结构的更多信息
@FedericoCaccia 堆栈必须在顶部。
为什么栈必须在顶部？
@FedericoCaccia 您使用开关导航器解决了它。它解决了您的临时问题，但不会叠加。只有当一个stack是parent的navigator时，才能堆叠一个screen stack。

【解决方案2】：

这将重置整个路由器并将您放在一个屏幕上，

const resetAction = StackActions.reset({ // import StackActions & NavigationActions from react-navigation
  index: 0,
  key: null, // this is important
  actions: [NavigationActions.navigate({ routeName: "ScreenName" })] // where you want to go after reset
});
this.props.navigation.dispatch(resetAction);

如果 StackActions 或 NavigationActions 未定义，那么您可能会在抽屉或选项卡等其他导航下使用它。将此重置代码移动到stack 或switch 路由器屏幕。

【讨论】：

我将该代码放在抽屉导航器内屏幕设置中的注销功能上。抽屉导航器包含两个屏幕：设置和主页。我正在尝试将用户重定向到登录屏幕，该屏幕不在导航器中（属于抽屉导航器的父导航器）。我收到以下错误：没有为密钥 SignIn 定义 rout。必须是以下之一：“设置”。
我更新了问题，添加了有关导航器一般结构的更多信息
这就是为什么我告诉你它在标签或抽屉导航下不起作用。在堆栈屏幕中使用它并使用道具或事件监听器调用它
正是你需要把它放在主堆栈导航器中，将堆栈嵌套在抽屉内也不会起作用，因为它只会重置到它的堆栈导航器并且不会进一步上升。
是的，它可以完美地工作，因为切换导航器只会呈现其中一个。

【解决方案3】：

终于，我得到了答案。可能对那些陷入同样问题的人有所帮助。主导航器必须配置为 SwithNavigator。来自docs：

SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理返回操作，并且在您切换离开时将路由重置为默认状态。这正是我们希望从身份验证流程中获得的确切行为：当用户登录时，我们想要丢弃身份验证流程的状态并卸载所有屏幕，而当我们按下硬件返回按钮时，我们希望无法返回身份验证流程。我们使用导航动作在 SwitchNavigator 中切换路由

所以，我们的应用需要按如下方式创建：

const AppNavigator = createSwitchNavigator(
    {
        OnBoard: OnBoardTabsNavigator,
        Logged: LoggedDrawerNavigator,
    }
);

然后，在注销屏幕中，配置以下注销功能：

_LogOut(){
    console.log("Logging out");
    AsyncStorage.clear() // <-- Don't forget to clear any variables stored on Async Storage
    .then(() => {
        this.props.navigation.navigate('SignIn')
    })
    .catch((err) => {
        console.log(err);
    })
}

【讨论】：