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

Answer 1

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

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

替换为：

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

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

1 个答案: