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

Question

我对 React Native Navigation Library 有问题，问题是我在我的应用程序中实现了注销，忘记了 AsyncStorage presistent 数据，当我登录到另一个帐户而不重新启动应用程序时问题开始了，我发现导航抽屉没有感觉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;

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

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