React native: сброс маршрута, возврат на домашнюю страницу - PullRequest
Новая
       4

React native: сброс маршрута, возврат на домашнюю страницу

0 голосов
/ 06 декабря 2018

Моя идея состоит в том, чтобы иметь 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' ).Есть идеи?

...