如何使用react-native在登出时正确卸载所有屏幕？

Question

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

我怎样才能做到这一点？ 在屏幕内使用this.props.navigation.popToTop()不起作用。

我当前的导航器结构：

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

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

Answer 1

你可以试试这个吗？

import { StackActions } from 'react-navigation';

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

Answer 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路由器屏幕。

Answer 3

最后，我得到了答案。 可能会对陷入同一问题的人有所帮助。 主导航器必须配置为SwithNavigator。 从文档 ：

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);
    })
}