Reactjs 如何在本机工具栏中显示/隐藏图标

登录屏幕处于活动状态时，我需要在工具栏上隐藏汉堡菜单/位置图标。我认为可行的一个选择是将图标默认设置为空字符串。并在我的Login.js&Logout.js中的成功回调函数中使用EventEmitter，然后在我的工具栏组件中侦听它。发送布尔值以确定显示/隐藏。我不确定是否有更好的方法来做到这一点，所以我正在寻求建议。发射/侦听事件按预期工作。问题是如何使用变量应用空字符串或命名图标

这是工具栏组件

    export default class Toolbar extends Component {

    //noinspection JSUnusedGlobalSymbols
    static contextTypes = {
        navigator: PropTypes.object
    };

    //noinspection JSUnusedGlobalSymbols
    static propTypes = {
        onIconPress: PropTypes.func.isRequired
    };

    //noinspection JSUnusedGlobalSymbols
    constructor(props) {
        super(props);
        this.state = {
            title: AppStore.getState().routeName,
            theme: AppStore.getState().theme,
            menuIcon: '',
            locationIcon: ''
        };
    }

    emitChangeMarket() {
        AppEventEmitter.emit('onClickEnableNavigation');
    }

    //noinspection JSUnusedGlobalSymbols
    componentDidMount = () => {
        AppStore.listen(this.handleAppStore);
        AppEventEmitter.addListener('showIcons', this.showIcons.bind(this));
    };

    //noinspection JSUnusedGlobalSymbols
    componentWillUnmount() {
        AppStore.unlisten(this.handleAppStore);
    }

    handleAppStore = (store) => {
        this.setState({
            title: store.routeName,
            theme: store.theme
        });
    };

    showIcons(val) {
        if (val === true) {
            this.setState({
                menuIcon: 'menu',
                locationIcon: 'location-on'
            });
        } else {
            this.setState({
                menuIcon: '',
                locationIcon: ''
            });
        }
    }

    render() {
        let menuIcon = this.state.menuIcon;
        let locationIcon = this.state.locationIcon;

        const {navigator} = this.context;
        const {theme} = this.state;
        const {onIconPress} = this.props;

        return (
            <MaterialToolbar
                title={navigator && navigator.currentRoute ? navigator.currentRoute.title : 'Metro Tracker Login'}
                primary={theme}
                icon={navigator && navigator.isChild ? 'keyboard-backspace' : {menuIcon}}
                onIconPress={() => navigator && navigator.isChild ? navigator.back() : onIconPress()}
                actions={[{
                    icon: {locationIcon},
                    onPress: this.emitChangeMarket.bind(this)
                }]}
                rightIconStyle={{
                    margin: 10
                }}
            />
        );
    }
}

导出默认类工具栏扩展组件{
//不检查未使用的全局符号
静态上下文类型={
导航器：PropTypes.object
};
//不检查未使用的全局符号
静态类型={
onIconPress:PropTypes.func.isRequired
};
//不检查未使用的全局符号
建造师（道具）{
超级（道具）；
此.state={
标题：AppStore.getState（）.routeName，
主题：AppStore.getState（）.theme，
menuIcon:“，
位置图标：“”
};
}
外汇市场（）{
appendentmitter.emit（'onClickEnableNavigation'）；
}
//不检查未使用的全局符号
componentDidMount=（）=>{
AppStore.listen（this.handleAppStore）；
appeventmitter.addListener（'showIcons'，this.showIcons.bind（this））；
};
//不检查未使用的全局符号
组件将卸载（）{
AppStore.unlisten（this.handleAppStore）；
}
handleAppStore=（存储）=>{
这是我的国家({
标题：store.routeName，
主题：store.theme
});
};
显示图标（val）{
如果（val==真）{
这是我的国家({
菜单图标：“菜单”，
locationIcon:“上的位置”
});
}否则{
这是我的国家({
menuIcon:“，
位置图标：“”
});
}
}
render（）{
让menuIcon=this.state.menuIcon；
让locationIcon=this.state.locationIcon；
const{navigator}=this.context；
const{theme}=this.state；
const{onIconPress}=this.props；
返回(
navigator&&navigator.isChild？navigator.back（）：onIconPress（）}
行动={[{
图标：{locationIcon}，
onPress:this.emitChangeMarket.bind（this）
}]}
右图样式={{
差额：10
}}
/>
);
}
}

我得到的警告信息是：

提供给工具栏的对象类型的道具图标无效，应为字符串

如何在包装在变量括号中时传递字符串

---

或者如果更简单，如何隐藏/显示整个工具栏？两种方法都有效

尝试移除

菜单图标

和

位置图标

周围的括号：

...
icon={navigator && navigator.isChild ? 'keyboard-backspace' : menuIcon}
...
    icon: locationIcon,
...

---

我已经试过了。获取此错误“RawText”“必须包装在显式组件中”我深入到react native material design的github代码中，没有发生这种情况的原因，因为当图标等于空字符串时，就会发生这种情况。它发生在哪一行和哪一个文件中？