Question

我需要在登录屏幕处于活动状态时隐藏工具栏上的汉堡菜单/位置图标。我认为可行的一个选项是默认情况下将图标设置为空字符串。并在我的Login.js＆amp;中使用成功回调函数中的EventEmitter。 Logout.js，然后在我的工具栏组件中监听它。发送bool以确定显示/隐藏。我不确定是否有更好的方法这样做，所以我想要建议。 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
                }}
            />
        );
    }
}

我得到的警告信息是：

提供给工具栏的类型对象的prop图标无效，需要一个字符串。

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

或者如果我更容易隐藏/显示整个工具栏？两种方式都有效。

Answer 1

尝试删除menuIcon和locationIcon周围的括号：

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

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

1 个答案: