我想更改抽屉中用户名的状态.从更新配置文件屏幕更新后

Question

>我用contentComponent创建了抽屉，contentComponent有一个用于抽屉设计的.js文件。抽屉包含用户名和菜单选项卡。

现在，当用户名更新时，我有一个名为更新配置文件的屏幕，当时只有抽屉应该显示更新的用户名。我在Drawer.js中使用了用户名的状态

我已经尝试通过传递名为 updateUsername('新名称'(的类函数。

并使用如下函数：

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

Answer 1

您正在设置用户名是通过updateUsername 方法设置的！ 并从道具中使用它！

<Text>{this.props.username}</Text>

将其替换为：

<Text>{this.state.username}</Text>