0

我已经创建了抽屉，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
4

1 回答 1

0

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

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

将其替换为：

<Text>{this.state.username}</Text>
于 2019-08-08T12:19:50.700 回答