如何 show/hide 反应本机工具栏中的图标

Question

我需要在登录屏幕处于活动状态时隐藏工具栏上的 hamburger-menu/location 图标。我认为可行的一种选择是默认将图标设置为空字符串。并在我的 Login.js & Logout.js 的成功回调函数中使用 EventEmitter，然后在我的工具栏组件中监听它。发送布尔值以确定 show/hide。我不确定是否有更好的方法可以做到这一点，所以我愿意提出建议。 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
                }}
            />
        );
    }
}

我收到的警告信息是：

Invalid prop icon of type object supplied to toolbar, expected a string.

如何传递包含在变量括号中的字符串？

或者如果更简单，我怎样才能 hide/show 整个工具栏？无论哪种方式都有效。

Answer 1

尝试删除 menuIcon 和 locationIcon:

两边的括号

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

如何 show/hide 反应本机工具栏中的图标

how to show/hide icons in a react native toolbar

reactjs

react-jsx

react-native