TypeError：未定义不是对象（正在评估“ navigation.navigate”）

Question

我一直在尝试一个本机反应项目。我有一个基本的登录屏幕，其中有两个按钮，一个用于登录，另一个用于将您带到“忘记密码”屏幕。让我困扰的是登录按钮可以正常工作，但是忘记密码按钮却给出了标题中写的错误。

登录屏幕：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  Icon, Text, Item, Input, Button
} from 'native-base';
import { firebaseAuth } from '../../environment/config';

export default class Login extends React.Component {
  state = {
    email: '', password: '', errorMessage: null
  };

  handleLogin = () => {
    const { email } = this.state;
    const { password } = this.state;
    firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        const { navigation } = this.props;
        navigation.navigate('Authentication');
      })
      .catch(error => this.setState({ errorMessage: error.message }));
  };

  forgotPass = () => {
    const { navigation } = this.props;
    navigation.navigate('ForgotPassword');
  };

  render() {
    const { errorMessage } = this.state;
    return (
      <View style={styles.container}>
        {/* <Text style={styles.heading}>Login</Text> */}
        {errorMessage && <Text style={{ color: 'red' }}>{errorMessage}</Text>}
        <Item>
          <Icon active name="person" />
          <Input
            autoCapitalize="none"
            placeholder="Email"
            onChangeText={email => this.setState({ email })}
            value={this.email}
          />
        </Item>
        <Item>
          <Icon active name="lock" />
          <Input
            secureTextEntry
            autoCapitalize="none"
            placeholder="Password"
            onChangeText={password => this.setState({ password })}
            value={this.password}
          />
        </Item>

        <Button
          transparent
          dark
          style={styles.forgotBtn}
          onPress={this.forgotPass}
        >
          <Text>Forgot Password </Text>
        </Button>
        <Button
          style={styles.signupBtn}
          rounded
          dark
          block
          onPress={this.handleLogin}
        >
          <Text>Log In </Text>
        </Button>
      </View>
    );
  }
}

和App.js

const SwitchNavigator = createSwitchNavigator(
  {
    Loading,
    SignUp,
    Login,
    Main,
    Authentication,
    LoginRegisterComponent,
    ForgotPassword
  },
  {
    initialRouteName: 'Loading',
    headerMode: 'none'
  }
);

const App = createAppContainer(SwitchNavigator);
export default App;

我检查了其他与此问题类似的问题： undefined is not an object (evaluating 'navigation.navigate') && I am getting undefined is not an object (evaluating 'this.props.navigation.navigate')

给出的答案没有太大帮助，我不明白为什么一个按钮起作用而另一个按钮不起作用。