如何更改Navigator左按钮的反应-本机在运行时？

Question

我已经启动了以Login.js作为路由组件的Navigtor。登录时，我使用推送方法导航到显示滑动菜单的仪表板屏幕。我已经实现了滑动菜单使用反应-本机-抽屉-布局。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>
        )
    }
}

​

您可以更改left button图标，因为我在Page1上添加了menu图标，在Page2上添加了arrow-back图标。 请参阅此链接，以了解react本机：Navigation Drawer中的抽屉的完整实现。