react-native - 引き出しのユーザー名の状態を変更したい。プロフィール更新画面から更新後

Question

で引き出しを作成しcontentComponentましたが、引き出しデザイン用contentComponentのファイルがあります。.jsドロワーには、ユーザー名とメニュー タブが含まれています。

その時点でユーザー名が更新されると、更新プロファイルと呼ばれる画面が表示されます。ドロワーのみが更新されたユーザー名を表示する必要があります。ユーザー名に状態を使用しましたDrawer.js

updateUsername('new name') というクラスの関数を渡してみました。

そして、次のような関数を使用します:

new Drawer().updateUsername('John')

しかし、それは機能しません

   class Drawer extends Component {

    constructor(props) {
        super(props);
        this.state = {
           username:'',
       }
   }
componentWillMount(){
}

updateUsername(name){
this.setState({username:name})
 }

render() {
    return (
        <SafeAreaView style={styles.container}>
        <Text>{this.state.username}</Text>
        </SafeAreaView>
    );
}
}

export default Drawer


import Drawer from '../../screens/drawer/Drawer'
class TopBar extends Component {

_openDrawer() {  

this.props.navigation.dispatch(DrawerActions.openDrawer());
            new Drawer().updateUsername('John Deo')
    }

render() {
        return (

        <View style={{ height: 54, borderWidth: 0, flexDirection: 'row', borderBottomColor: Colors.colorBorder, borderBottomWidth: 0.2, shadowColor: Colors.colorBorder, backgroundColor: Colors.colorWhite, shadowOffset: { width: 0, height: 0, }, shadowOpacity: 0.9, shadowRadius: 0, elevation: 1 }}>
            <TouchableOpacity style={{ flex: 1.5, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }} onPress={() => (this.props.isBack) ? this.props.navigation.goBack() : this._openDrawer()}>
                <Image source={{ uri: (this.props.isBack) ? 'back_icon' : 'menu_icon' }} style={{ height: 25, width: 25 }} resizeMode='center' />
            </TouchableOpacity>
            <View style={{ flex: 7, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 18, fontFamily: Fonts.ralewayBold, color: Colors.colorBlack }}>{this.props.topBarTextTitle}</Text>
            </View>
            <TouchableOpacity style={{ flex: 1.5, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }} onPress={this.props.rightClick}>
                <Image source={{ uri: this.props.imageRight }} style={{ height: 25, width: 25 }} resizeMode='center' />
            </TouchableOpacity>

        </View>
    );
}
}
export default TopBar