当我导航到另一个BottomTabNavigator时，如何确保抽屉导航被完全删除？

Question

我有一个BottomTabNavigator，其中包含另一个BottomTabNavigator和两个DrawerNavigator。

其中一个DrawerNavigators代表已认证状态。我只是在这个抽屉导航中实现了注销按钮。该按钮将清除redux状态，并导航到BottomTabNavigator，更具体地说，导航到Welcome导航器的Login路径。

但是，一旦注销后在“欢迎导航”中，当我尝试导航到BottomTabNavigator的另一条路线时，就会显示经过身份验证的抽屉。

我不确定为什么会这样。刷新expo项目时，我意识到确实该应用程序处于未认证状态。

是否有办法确保我注销后未显示Authenticated Drawer Navigator？

这是我的主要导航器：

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  SafeAreaView,
  Button,
  AsyncStorage,
  TouchableOpacity,
  Text,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { PersistGate } from 'redux-persist/integration/react';
import {
  createBottomTabNavigator,
  createSwitchNavigator,
  createDrawerNavigator,
  createStackNavigator,
  DrawerItems,

 } from 'react-navigation';
import { Provider } from 'react-redux';
import Welcome from './screens/Welcome';
import Register from './screens/RegisterScreen';
import Login from './screens/LoginScreen';
import Home from './screens/Home';
import Events from './screens/Events';
import Board from './screens/Board';
import HomePage from './screens/HomePage';
import SettingsScreen from './screens/BusinessSettings';
import BusinessEvents from './screens/BusinessEvents';
import EventListings from './screens/EventListings';
import BusinessListings from './screens/BusinessListings';
import Business from './screens/Business';
import BusinessForm from './screens/BusinessForm';
import EventForm from './screens/EventForm';
import Logout from './screens/Logout';
import { persistor, store } from './store';


const MainNavigator = createBottomTabNavigator(
  {
    Welcome: createBottomTabNavigator({
      Welcome: Welcome,
      Login: Login,
      Register: Register,
      Board: Board,
    }),

    Home: createDrawerNavigator({
      Home: {
        screen: Home,
      },
      Events: {
        screen: Events,
      },
      Business: {
        screen: Business
      }
    }),
    HomePage: createDrawerNavigator({
      HomePage: {
        screen: HomePage,
      },
      Settings: {
        screen: SettingsScreen,
      },
      EventListings: {
        screen: EventListings
      },

      EventForm: {
        screen: EventForm
      },

      BusinessEvents: {
        screen: BusinessEvents
      },
      BusinessListings: {
        screen: BusinessListings
      },
      NewBusiness: {
        screen: BusinessForm
      },
      Business: {
        screen: Business
      }
    }, {

      contentComponent: (props) => (
        <View style={{ flex:1 }}>
         <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
           <DrawerItems {...props} />
           <TouchableOpacity style={{  flexDirection: 'row', marginLeft: '8%', paddingTop: '2%' }} onPress={ async () => {
             await AsyncStorage.clear();
             await persistor.purge();
             props.navigation.navigate("Welcome");
           }}>
               <Ionicons name="ios-log-out-outline" size={24} color="#053541" /><Text style={{ marginLeft: '14%', fontWeight: 'bold', color: 'black' }}>Log Out</Text>
           </TouchableOpacity>
         </SafeAreaView>
   </View>
     ),
     drawerOpenRoute: 'DrawerOpen',
     drawerCloseRoute: 'DrawerClose',
     drawerToggleRoute: 'DrawerToggle'

    })
  },
  {
   headerMode: 'none',
   navigationOptions: {
        header: null,
        tabBarVisible: false,
        headerVisible: false,
        headerMode: 'none',
  },
    tabBarVisible: false,
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    transitionConfig: () => ({
      transitionSpec: {
        duration: 0,
      },
    }),

    /* Other configuration remains unchanged */
  }
);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MainNavigator />
        </PersistGate>
      </Provider>
    );
  }
};