使用react-navigation在react native中的不同导航器之间跳转

Question

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'
});

Answer 1

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/>
    );
}

Answer 2

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'
    });

Answer 3

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.