App.js code:
function firstScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen
name="Login"
component={Login}
options={{
title: 'Login', //Set Header Title
headerLeft: ()=>
<NavigationDrawerStructure
navigationProps={navigation}
/>,
headerStyle: {
backgroundColor: '#CA2C68', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({ navigation }) {
return (
<Stack.Navigator
initialRouteName="Browse"
screenOptions={{
headerLeft: ()=>
<NavigationDrawerStructure
navigationProps={navigation}
/>,
headerStyle: {
backgroundColor: '#CA2C68', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
}
}}>
<Stack.Screen
name="Browse"
component={Browse}
options={{
title: 'Browse', //Set Header Title
}}/>
<Stack.Screen
name="Profile"
component={Profile}
options={{
title: 'Profile', //Set Header Title
}}/>
</Stack.Navigator>
);
}
export default App function has below code:
<NavigationContainer>
<Drawer.Navigator
initialRouteName = {Login}
drawerContentOptions={{
activeTintColor: '#CA2C68',
itemStyle: { marginVertical: 5 },
}}>
<Drawer.Screen
name="Login"
options={{ drawerLabel: 'Login' }}
component={firstScreenStack} />
<Drawer.Screen
name="Browse"
options={{ drawerLabel: 'Browse' }}
component={secondScreenStack} />
<Drawer.Screen
name="Profile"
options={{ drawerLabel: 'Profile' }}
component={profileScreenStack} />
</Drawer.Navigator>
</NavigationContainer>
I am using stack and drawer navigation both.
I want navigation.navigate("Profile");
Now how can I get navigation props into my class components? I am new in react native and navigation. Its bit complicated to understand for me. If you can help me out it will be better. Thanks.
question from:
https://stackoverflow.com/questions/66046203/how-to-navigate-to-a-another-screen-in-class-component-in-react-native 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…