wie man Symbole in einer reaktiven nativen Symbolleiste anzeigt/versteckt

Question

Ich muss ein Hamburger-Menü/Standort-Symbol in der Symbolleiste ausblenden, während der Anmeldebildschirm aktiv ist. Eine Option, von der ich dachte, dass sie funktioniert, ist, dass die Symbole standardmäßig auf eine leere Zeichenfolge gesetzt werden. Und verwenden Sie den EventEmitter in der Funktion für den erfolgreichen Rückruf in meiner Login.js & Logout.js, und hören Sie danach in meiner Toolbar-Komponente danach. Senden eines Bool zum Anzeigen/Verbergen. Ich bin mir nicht sicher, ob es eine bessere Möglichkeit gibt, dies zu tun, also bin ich auf der Suche nach Vorschlägen. Die Emit/Listen-Ereignisse funktionieren wie erwartet. Das Problem ist, wie ich eine Variable verwende, um die leere Zeichenfolge oder das benannte Symbol anzuwenden.

Hier ist die Symbolleiste Komponente.

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

Die Warnmeldung ich erhalte, ist die:

Ungültige prop Symbol Objekt vom Typ Symbolleiste geliefert, erwartet einen String.

Wie kann ich eine Zeichenfolge übergeben, während sie in variablen Klammern eingeschlossen ist?

Oder wenn einfacher wie kann ich die gesamte Symbolleiste ausblenden/anzeigen? so oder so funktioniert.

Answer 1

Versuchen Sie, die Klammern um menuIcon und locationIcon Entfernung:

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