javascript - 类型错误 : Cannot read property 'navigate' of undefined - React native

Question

我使用 Firebase 和 React-Native 来对用户进行身份验证。我的主文件是 App.js，我将用户发送到登录组件，并且我有两个组件来管理路由。 Appnavigator.js 用于创建 switchNavigator 和 DrawerNavigator.js 用于 createDrawernavigator。身份验证后，我想将用户发送到一个内部组件(管理员)。

以下是特定页面的代码，

登录.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
        }>

我有两个组件来管理登录事件。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;

我有 AppNavigator 页面来创建 AppContainer 和 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,
    })
);

我在handleLogin函数中使用了this.props.navigation.navigate('Admin')来在成功登录后路由用户。但我收到错误

TypeError: Cannot read property 'navigate' of undefined

App.js 文件

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

您尚未将 Login 组件添加为 AppNavigator 的一部分:

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