如何在反应原生工具栏中显示/隐藏图标

Question

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

这里是工具栏组件。

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 
       }} 
      /> 
     ); 
    } 
} 

警告消息我得到的是：供给工具栏类型的对象

无效的道具图标，预期的字符串。

如何传递一个字符串，同时包裹在变量括号中？

或者如果更容易如何隐藏/显示整个工具栏？无论哪种方式工作

Answer 1

尝试围绕menuIcon和locationIcon去掉括号：

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