反応するネイティブツールバーでアイコンを表示/非表示にする方法

Question

ログイン画面がアクティブな間、ツールバーのハンバーガーメニュー/位置アイコンを非表示にする必要があります。私が思うひとつの選択肢は、デフォルトでアイコンを空の文字列に設定することです。また、Login.js & Logout.jsのsuccessコールバック関数でEventEmitterを使用して、ツールバーコンポーネントでそれを待ち受けます。表示/非表示を決定するブールを送信する。これを行うより良い方法があるかどうかはわかりませんので、私は提案をしています。 Emit/Listenイベントは期待通りに機能します。問題は、変数を使用して空の文字列または名前付きアイコンを適用する方法です。

ここにはツールバーコンポーネントがあります。

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, 
...