I have 3 Navigators. The MainNavigator is the root of the other two (Auth and Activities). Based on whether the user has successfully logged in, I need to route the user from the Auth Stack to the Activities stack. How can I do that? I can't seem to figure this out just yet (new to react-native, coming from Angular).
Here's the line of code that I use to navigate to the Activities stack:
this.props.navigation.navigate('Activities');
Auth:
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
Activities:
export const ActivitiesNavigator = TabNavigator({
ActivityList: {
screen: ActivityList
},
MyActivityList: {
screen: MyActivityList
},
CreateActivity: {
screen: CreateActivity
}
}, {
initialRouteName: 'ActivityList'
});
Main Navigator:
export const MainNavigator = StackNavigator({
Auth: { screen: AuthNavigator},
Activities: { screen: ActivitiesNavigator },
}, {
initialRouteName: 'Auth',
headerMode: 'none',
animationEnabled: 'true'
});
This actually works. Lack of sleep made me put the 'navigate' command in a different method. So in my App.js file I just need to return the MainNavigator and I'm good to go:
render() {
return (
<MainNavigator/>
);
}
YOU DON'T NEED 3 Navigators. this is the way to do it with React Navigation
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
},
Main: {
screen: ActivitiesNavigator
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
Visit StackActions reset : The reset action wipes the whole navigation state and replaces it with the result of several actions.
In Latest react-navigation version: 3.3.0, I have used: at Signup or Login so that to start Home/Main Flow
import { StackActions, NavigationActions } from 'react-navigation'; const resetAction = StackActions.reset({ index: 0, key: null, // <-this is imp. actions: [ NavigationActions.navigate({ routeName: 'Main' }) ], }); this.props.navigation.dispatch(resetAction);
Remember : Adding key: null means master route will be null and not on any route. So we are free to navigate to the route in any Nested Stacks
key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.