类型错误：无法读取未定义的属性“导航”-反应本机

Question

I'm using Firebase with react-native to authenticate users. My main file is App.js and I'm sending the users to Login component and I have two components to manage routes. Appnavigator.js for creating a switchNavigator and DrawerNavigator.js for createDrawernavigator. After authentication, I want to send the user to one inner component (Admin).

Following are the codes for particular pages,

Login.js

export default class Login extends React.Component {

  state = {
    email:"",
    password: "",
    errorMessage: null
  }

  handleLogin = () => {
      const { email , password } = this.state;
      firebase.auth()
          .signInWithEmailAndPassword(email, password)
          .then(() => this.props.navigation.navigate('Admin'))
          .catch(error => alert(error))
    } 
  render(){
.........................


<TouchableOpacity style={styles.loginBtn}  onPress = {
          this.handleLogin
        }>

And I have two components to manage login activities. DrawerNavigator.js

import Admin from '../screens/Admin.js';
import Login from '../screens/Login.js'

import menu from '../assets/drawer.png';

const DrawerNavigator = createDrawerNavigator({

    Admin: Admin,
},
{
    drawerOpenRoute: 'openDrawer',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
},
);

export default DrawerNavigator;

And I have AppNavigator page to create an AppContainer and switchnavigator.

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import DrawerNavigator from './DrawerNavigator.js';
import Login from '../screens/Login.js';
import App from '../App.js';


export default createAppContainer(
    createSwitchNavigator({
        Main:DrawerNavigator,
    })
);

I have used this.props.navigation.navigate('Admin') In the handleLogin function to route the user after a successful login. But I'm getting an error

TypeError: Cannot read property 'navigate' of undefined

App.js file

import React from 'react';
import { StyleSheet, Platform, Text, View, Image, TextInput, TouchableOpacity } from 'react-native';import AppNavigator from './navigation/AppNavigator.js';
import Login from './screens/Login.js';
import AppNavigator from '../navigation/AppNavigator.js;
export default class App extends React.Component {

  render(){
  return (

    <Login />
<AppNavigator />
  );
}}

Answer 1

You have not added your Login component as a part of AppNavigator :

export default createAppContainer(
    createSwitchNavigator({
        Main:DrawerNavigator,
        Auth: createStackNavigator(
          {
            Login: Login
          }
      )
    })
);