I have created my App Navigator component with these libraries
- react-navigation
- react-navigation-stack
- react-navigation-drawer
and drawer is nested inside main stack.
Drawer stack
const DrawerMenu = createDrawerNavigator(
{
Home: {
screen: Home
},
MyAccount: {
screen: MyAccount
}
},
{
overlayColor: "rgba(0, 0, 0, 0.7)",
gestureEnabled: false,
initialRouteName: "Home",
contentComponent: Drawer,
drawerWidth: styles.drawerWidth
}
);
const DrawerAppContainer = createAppContainer(DrawerMenu);
Main App container or Root
const routes = {
//independent screens
Language: {
screen: Language,
},
Welcome: {
screen: Welcome,
},
DetailScreen: {
screen: DetailScreen,
},
Dashboard: {
screen: DrawerAppContainer,
},
Login: {
screen: Login,
},
const routeConfig = {
initialRouteName: "Home",
headerMode: "none",
navigationOption: {
gestureEnabled: false,
},
};
const AppNavigator = createStackNavigator(routes, routeConfig);
export default createAppContainer(AppNavigator);
In my project, I want the current rendering screen name in the drawer component so I can style route name accordingly(like color, bold fonts).
I tried getting route name with props (this.props.navigation.state.routeName), but its always showing Dashboard.
How do I get nested routeName like Home or MyAccount?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…