Question

我已经使用Login.js作为路由组件启动了Navigtor。在登录时，我使用push方法导航到仪表板屏幕，其中存在滑动菜单。我使用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>
        )
    }
}

您可以更改left button图标，因为我添加了menu图标   在 Page2 上的 Page1 和arrow-back图标。

请参阅此链接，了解react-native中Drawer的完整实现：   Navigation Drawer

如何在运行时更改反应原生的导航器左按钮？

1 个答案: