React-Navigation-DrawerNavigator中带有后退按钮的标题

时间:2018-09-22 18:26:06

标签: react-native navigation-drawer react-navigation react-navigation-drawer react-navigation-stack

我觉得我的导航设置很乱,我无法实现我想要的。

我有一个StackNavigator,可以提供某些页面,一个DrawerNavigator,可以处理一些其他页面,,一个BottomTabNavigator

大部分内容都可以使用,但是在通过Drawer

访问的页面上,似乎我无法在带有后退按钮的标题上

这是我的代码,在注释中似乎没有处理我想要的内容:

const TabRoutes = createBottomTabNavigator({
    Dashboard: {
        screen: Dashboard,
        navigationOptions: {
            tabBarLabel: "Home",
            tabBarIcon: ({color}) => <Icon name='home' size={26} color={color} />
        }
    },
    Chat: {
        screen: Chat,
        navigationOptions: {
            tabBarLabel: "Chat",
            tabBarIcon: ({color}) => <Icon name='comments' size={26} color={color} />
        }
    }
})

const DrawerRoutes = createDrawerNavigator({
    Tabs: {
        screen: TabRoutes,
        navigationOptions: {
            drawerLabel: "Home",
            drawerIcon: ({color}) => <Icon name='home' size={24} />

            headerTitle: "Main" // *** Not handled
        }
    },
    Settings: {
        screen: Settings,
        navigationOptions: ({navigation}) => ({
            drawerLabel: "Settings",
            drawerIcon: ({color}) => <Icon name='cog' size={24} />,

            // *** This block is not handled
            // I expected it to override the headerLeft defined in the StackRoutes.Main 
            headerTitle: "Settings",
            headerLeft: (
                <Button onPress={() => navigation.goBack()}>
                    <Icon name='arrow-left' size={30} />
                </Button>
            ),
            // *** END ***
        })
    }
})


const StackRoutes = createStackNavigator({
    Splashscreen: {
        screen: Splashscreen,
        navigationOptions: {
            header: null
        }
    },
    Signin: {
        screen: Signin,
        navigationOptions: ({navigation}) => ({
            title: 'Sign in',
        })
    },
    Signup: {
        screen: Signup,
        navigationOptions: ({navigation}) => ({
            title: 'Sign up',
        })
    },
    Main: {
        screen: DrawerRoutes,
        navigationOptions: ({navigation}) => ({
            headerLeft: (
                <Button onPress={() => navigation.openDrawer()}>
                    <Icon name='bars' size={26} />
                </Button>
            )
        })
    }
})

export default StackRoutes

我在做什么错了?

0 个答案:

没有答案