Question

我在抽屉导航器中显示用户名，但是当我注销并使用其他用户再次登录时，该用户名没有更新，而是显示了旧的用户名。

我也在使用didFocus Listener，但也无法正常工作，请帮助

import React, { Component } from 'react';
import { View, Image,Text, TouchableOpacity,MenuImage,navigation,AsyncStorage, Alert } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {
createDrawerNavigator,
createStackNavigator,
DrawerItems,
} from 'react-navigation';
import WalkThrow from '../pages/WalkThrow';
import Login from '../pages/Login';
import Register from '../pages/Register';

class NavigationDrawerStructure extends Component {
static propTypes = {
    navigation: functionTypes.isRequired,
};
toggleDrawer = async() => {
    this.props.navigationProps.openDrawer();
};
render() {
    return (
    <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
        <Image
            source={require('../assets/images/menu48.png')}
            style={{ width: 25, height: 25, marginLeft: 15 }}
        />
        </TouchableOpacity>
    </View>
    );
}
}

class NavigationImage extends Component {
toggleDrawer = async() => {
    this.props.navigationProps.openDrawer();
};
render() {
    return (
    <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer. bind(this)}>
        <Image
            source={require('../assets/images/user.png')}
            style={{ width: 40, height: 40, marginRight:15 }}
        />
        </TouchableOpacity>
    </View>
    );
}
}

class ShowUserName extends Component{
constructor(props) {
    super(props);
    this.state = {
    getname:''
    }
} 

componentDidMount= async()=>{
    let getname = await AsyncStorage.getItem('userName');
    this.setState({getname:getname});
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", async() => {
    let getname = await AsyncStorage.getItem('userName');
    this.setState({getname:getname});
    });
}

render() {
    return (
    <View>
        <Text style={{color:'#fff',fontSize:23,padding:5}}>
        {this.state.getname}
        </Text>
    </View>
    );
}
}

const Logout= createStackNavigator({
Register:{
    screen:Register,
    navigationOptions:{
    header: null,
    },
},
Login: {
screen: Login,
navigationOptions:{
    header: null,
    }
},
ForgetPassword: {
    screen: ForgetPassword,
    navigationOptions:{
    header: null,
    }
},
initialRouteName: 'WalkThrow',
});



const Profile_StackNavigator = createStackNavigator({
Profile: {
    initialRouteName: 'Profile',
    screen:ChangeName,
    navigationOptions: ({ navigation }) => ({
    title: 'Profile',
    headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
    headerStyle: {
        backgroundColor: '#3598db',
        shadowOpacity: 0, 
        elevation: 0,
    },
    headerTintColor: '#fff',
    }),
}
});

const ChangePassword_StackNavigator = createStackNavigator({
ChangePassword: {
    initialRouteName: 'WalkThrow',
    screen:ChangePassword,
    navigationOptions: ({ navigation }) => ({
    title: 'Change Password',
    headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
    headerStyle: {
        backgroundColor: '#3598db',
        shadowOpacity: 0, 
        elevation: 0,
    },
    headerTintColor: '#fff',
    }),
},
});



const DashBoard_StackNavigator = createStackNavigator({
WalkThrow: {
    screen: WalkThrow,
    navigationOptions:{
    header: null,
},
}, 

const DrawerContent = (props) => (
<View>
    <View
    style={{
        backgroundColor: '#3598db',
        height: 200,
        alignItems: 'center',
        justifyContent: 'center',
    }}>
    <Image
        source={require('../assets/images/user.png')}
        style={{ width:'36%', height: '50%' }}
    />
    <ShowUserName/>
    </View>
    <DrawerItems {...props} />
</View>
)

export default createDrawerNavigator({




ChangePassword: {
    screen: ChangePassword_StackNavigator,
    initialRouteName: 'Logout',
    navigationOptions: {
    drawerLabel: 'Change Password',
    drawerIcon: () => (
        <Image
        source={require('../assets/images/user48.png')}
        style={{width: 25, height: 25, }}
        />
    )
    },
},

Logout: {
    screen: Logout,
    initialRouteName: 'Logout',
    navigationOptions: {
    drawerLabel: 'Logout',
    drawerIcon: () => (
        <Image
        source={require('../assets/images/user48.png')}
        style={{width: 25, height: 25,}}
        />
    )
    },
},
},

{
contentComponent: DrawerContent,
});

我在抽屉式导航器中显示用户名，但是当我注销并以其他用户身份再次登录时，用户名未更新，它显示的是旧用户名。当其他用户登录时，则显示该用户的用户名

Answer 1

问题在于由于抽屉未卸载而不会重新运行

componentDidMount= async()=>{
    let getname = await AsyncStorage.getItem('userName');
    this.setState({getname:getname});
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", async() => {
    let getname = await AsyncStorage.getItem('userName');
    this.setState({getname:getname});
    });
}

应用程序体系结构的更大问题是，您使用asyncStorage作为状态管理，这是一个巨大的反模式，从长远来看，它将使您的应用程序真正变慢并消耗电池电量。

您必须使用某种状态管理，例如Context API或redux，然后直接从全局状态中获取您的userName，它将使应用程序更快并解决您的问题，并且可能还会遇到许多其他问题

然后您的渲染将看起来像这样，而无需在lifeCycle方法中再次设置状态，您可能还需要一个默认值，具体取决于声明抽屉的位置


render() {
    return (
    <View>
        <Text style={{color:'#fff',fontSize:23,padding:5}}>
        {this.props.SOMEGLOBALCONTEXTHERE.username || ''}
        </Text>
    </View>
    );
}

在React Native中以不同用户身份登录时更新导航抽屉中的用户名

1 个答案: