原生的反应：重设路线，返回首页(React native: reset route, back to

我的想法是有2个导航：

1. StackNavigator - 主页，登录页面，注册页面
2. DrawerNavigator - 页登录用户

现在，这里是我的代码：

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

接下来，我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"
})

登录页面有以下相关的代码：

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

现在，这就像一个魅力。 它带我到我的UserNavigator，它看起来像这样：

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"
})

所以，一旦我登录，个人资料页正常显示了。 现在的问题是以下几点：当我使用注销按钮，它运行onLogoutFinished（），这是我想改变导航回到主页面，但似乎无法做到这一点，我尝试无论怎样。 我都尝试：

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

和

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

但两者的农产品： Undefined is not an object ( evaluating '_this2.props.navigation.dispatch' ) 。 有任何想法吗？

文章来源: React native: reset route, back to home page