Я чувствую, что мои настройки навигации - беспорядок, и я не могу добиться того, чего хочу.
У меня есть StackNavigator
, который обслуживает некоторые страницы и a DrawerNavigator
которая обрабатывает некоторые другие страницы и a 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
Что я делаю неправильно?