在重新启动应用程序之前，导航抽屉不会刷新

Question

我对React Native导航库有问题，问题是我在应用程序中实现了忘记AsyncStorage持久数据的注销，当我登录到另一个帐户而不重新启动应用程序时，问题开始了，我发现导航抽屉虽然我会根据AsyncStorage的返回值来更新状态，就好像它已被缓存一样，但它不会感知到AsyncStorage中的更改，因此我希望有一种方法可以在注销后重新刷新导航图或刷新导航抽屉式缓存视图登录到另一个帐户以更改名称和缩略图内容。

我试图找到可以用我自己的逻辑替换的任何事件侦听器或回调，但是没有发现任何密切相关的东西。 我还尝试直接用axios调用替换AsyncStorage以获取用户，但没有任何效果。

我的导航器代码：

import {createStackNavigator, createAppContainer, createDrawerNavigator} from 'react-navigation';
import {
    Login,
    Register,
    ShowProperty,
    AllProps,
    Splash,
    Search,
    SearchResult,
    EditProfile,
    AddProperty,
    Home,
    HomeSearch,
    Contact,
    About,
} from "./pages";
import {NavDrawer} from "./components";
import {Dimensions} from 'react-native';


const StackNavigator = createStackNavigator(
    {
        Welcome: {
            screen: Splash
        },
        Register: {
            screen: Register
        },
        Login: {
            screen: Login
        },
        ShowProps: {
            screen: AllProps
        },
        ShowProp: {
            screen: ShowProperty
        },
        Search: {
            screen: Search
        },
        SearchResult: {
            screen: SearchResult
        },
        EditProfile: {
            screen: EditProfile
        },
        AddProperty: {
            screen: AddProperty
        },
        Home: {
            screen: Home,
        },
        HomeSearch: {
            screen: HomeSearch,
        },
        About: {
            screen: About,
        },
        Contact: {
            screen: Contact,
        },
    },
    {
        initialRouteName: "Welcome",
        headerMode: "none",
        duration: 500,
        lazy: true,
    }
);

const DrawerNavigation = createDrawerNavigator({
    Drawer: {
        screen: NavDrawer,
    },
    Application: StackNavigator,
}, {
    initialRouteName: "Application",
    headerMode: "none",
    duration: 500,
    lazy: true,
    contentComponent: NavDrawer,
    drawerWidth: Dimensions.get('window').width,
    drawerPosition: 'right',
});

export default createAppContainer(DrawerNavigation);



 and this is my custom drawer code:

import React, {Component} from 'react';
import {ActivityIndicator, Image, ImageBackground, StyleSheet, View, TouchableOpacity} from 'react-native';
import Responsive from "./Responsive";
import AsyncStorage from '@react-native-community/async-storage';
import {FontText} from "./index";
import Icon from 'react-native-vector-icons/EvilIcons';
import axios from 'axios';
import {NavigationActions, StackActions} from "react-navigation";

class NavDrawer extends Component {
    state = {
        profile_picture: null,
        name: null,
    };

    componentDidMount = async () => {
        const user = await AsyncStorage.getItem('@UserData:user');
        if(user !== null){
            let {first_name, last_name, profile_picture} = JSON.parse(user).data;
            console.log(first_name, last_name, profile_picture);
            let stateObj = {
                profile_picture: profile_picture ? profile_picture : null,
                name: first_name && last_name ? first_name +" "+ last_name : null,
            };
            this.setState({
                ...stateObj
            });
        }
    };

    handleNavigation = (routeName) => (e) => {
        this.props.navigation.closeDrawer();
        this.props.navigation.navigate(routeName);
    };

    resetAndNavigate = (route) => {
        let navigator = StackActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({
                    routeName: route,
                }),
            ],
        });
        this.props.navigation.dispatch(navigator);
    };

    clearCredentials = async (e) => {
        try{
            await AsyncStorage.clear();
            this.resetAndNavigate("Login");
        }
        catch (e) {
            this.resetAndNavigate("Login");
        }
    };

    render() {
        return (
                <ImageBackground source={require('../images/drawer-image.jpg')} style={style.backgroundStyle}>
                    <View style={style.infoWrapper}>
                        <Image source={this.state.profile_picture ?
                            {uri: this.state.profile_picture} :
                            require('../images/man.jpg')
                        } style={style.img}
                        />
                        <FontText wFont={'bold'} style={style.nameStyle}>
                            {this.state.name ? this.state.name : "Loading.."}
                        </FontText>
                    </View>
                    <View style={style.navigators}>
                        <TouchableOpacity onPress={this.handleNavigation('Home')}>
                            <FontText style={style.nameStyle}>
                                Home
                            </FontText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.handleNavigation('About')}>
                            <FontText style={style.nameStyle}>
                                About us
                            </FontText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.handleNavigation('Contact')}>
                            <FontText style={style.nameStyle}>
                                Contact us
                            </FontText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.clearCredentials}>
                            <FontText style={style.nameStyle}>
                                Logout
                            </FontText>
                        </TouchableOpacity>
                        <TouchableOpacity style={style.dismiss} onPress={this.props.navigation.closeDrawer}>
                                <Icon name={"close"} color={"#fff"} size={35}/>
                        </TouchableOpacity>
                    </View>
                </ImageBackground>

        );
    }
}

export default NavDrawer;

预期是当我注销并使用另一个帐户重新登录时，可以在抽屉中看到当前用户的姓名和照片。

实际行为是导航抽屉会缓存抽屉的自定义组件，当我与另一个用户登录时，我会看到前一个用户的信息。