React native: reset route, back to home page

问题

My idea is to have 2 navigators:

1. StackNavigator - Home page, login page, sign up page
2. DrawerNavigator - pages for logged in users

Now, here's my code:

// App.js

import React, { Component } from 'react'
import { MainNavigator } from './src/components/main/MainNavigator'
import { UserNavigator } from './src/components/user/UserNavigator'
import { createSwitchNavigator, createAppContainer } from 'react-navigation'

export default class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const Navigator = createAppContainer(
            makeRootNavigator(this.state.accessToken)
        )
        return <Navigator />
    }
}

const makeRootNavigator = (isLoggedIn) => {
    return createSwitchNavigator(
        {
            Main: {
                screen: MainNavigator
            },
            User: {
                screen: UserNavigator
            }
        },
        {
            initialRouteName: isLoggedIn ? "User" : "Main"
        }
    )
}

Next, my MainNavigator.js:

import { createStackNavigator } from 'react-navigation'
import MainPage from './MainPage'
import LoginPage from './LoginPage'

export const MainNavigator = createStackNavigator({
    Main: {
        screen: MainPage
    },
    Login: {
        screen: LoginPage
    },
},
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
},
{
    initialRouteName: "Main"
})

Login page has following relevant code:

export default class LogInPage extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
        <View style={styles.container}>
            <LoginButton
                onLoginFinished={
                    (error, result) => {
                        if (error) {
                            console.log("login has error: " + result.error);
                        } else if (result.isCancelled) {
                            console.log("login is cancelled.");
                        } else {
                            AccessToken.getCurrentAccessToken().then(
                                (data) => {
                                    console.log(data.accessToken.toString())
                                    this.props.navigation.navigate('User')
                                }
                            )
                        }
                    }
                }
                onLogoutFinished={() => console.log("logout.")}
            />
        </View>
    )
  }
}

Now, that works like a charm. It takes me to my UserNavigator, which looks like this:

import { createDrawerNavigator } from 'react-navigation'
import ProfilePage from './ProfilePage'
import {MainNavigator} from '../main/MainNavigator'

export const UserNavigator = createDrawerNavigator({
    Profile: {
        screen: ProfilePage,
    },
    MainNavigator: {
        screen: MainNavigator
    }
},
{
    initialRouteName: "Profile"
})

So, once I'm logged in, profile page properly shows up. Now, the problem is following: when I use logout button, it runs onLogoutFinished(), which is where I want to change navigation back to the main page, but can't seem to do it, whichever way I try. I tried both:

onLogoutFinished={() => {
    console.log("logout.")
    this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({ routeName: 'MainNavigator' })
    ]
}));

and

onLogoutFinished={() => {
    console.log("logout.")
    this.props.navigation.navigate('MainNavigator'));
}}

but both produce: Undefined is not an object ( evaluating '_this2.props.navigation.dispatch' ). Any ideas?

来源：https://stackoverflow.com/questions/53640941/react-native-reset-route-back-to-home-page