Question

我的想法是要有2个导航器：

StackNavigator-主页，登录页面，注册页面
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：重置路由，返回首页

0 个答案: