javascript - 如何在运行时更改 react native 中的导航器左按钮？

Question

我已经使用 Login.js 作为路由组件启动了 Navigtor。登录时，我使用推送方法导航到显示滑动菜单的仪表板屏幕。我已经使用react-native-drawer-layout实现了滑动菜单。 Dashbord.js 是另一个文件。现在我想控制导航栏左侧按钮。提前致谢。

Answer 1

为此，您必须在 App.js 中管理每个路由的不同情况

App.js

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Dashboard':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
           case 'Page1':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
            case 'Page2':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {navigator.pop()}}>
                        <Icon name='arrow-back' size={25} color={'white'} /> //you can change icon as your requirements
                    </TouchableOpacity>
                )
            default:
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('back')}}>
                        <Icon name='chevron-left' size={25} color={'white'} />
                    </TouchableOpacity>
                )
        }
    },

    RightButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity
                style={styles.navBarRightButton}>
                <Icon name='more-vert' size={25} color={'white'} />
            </TouchableOpacity>
        )
    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

You can able to change left button icon as I have added menu icon on Page1 and arrow-back icon on Page2.

Refer to this link for full implementation of Drawer in react-native: Navigation Drawer