React-native Undefined不是对象（this.props.navigation.navigate）

Question

我正在使用名为submit（位于loginForm中）的方法使用firebase成功登录后，尝试从登录页面导航到欢迎页面。除了使用StackNavigation导航到欢迎页面外，一切正常。

我查看了有关此错误的每个帖子，并尝试使用已发布的解决方案进行无数次修复，但似乎无法提出任何修复。我确信这是我在这里犯的一个简单而愚蠢的错误。我非常感谢任何帮助。

（事先道歉，这是我的第一个反应原生项目）

谢谢！

App.js

import React from 'react';
import * as firebase from 'firebase';
import {StackNavigator} from "react-navigation";
import Login from './src/components/Login/Login';
import Welcome from "./src/components/Welcome";

export const AppNavigator = StackNavigator({
    Login: {screen: Login},
    Welcome: {screen: Welcome},
});

//initialize Firebase
const firebaseConfig = {
    apiKey: "************************************",
    authDomain: "firstproject-r.firebaseapp.com",
    databaseURL: "https://firstproject-r.firebaseio.com",
    projectId: "firstproject-r",
    storageBucket: "",
    messagingSenderId: "************"
};
firebase.initializeApp(firebaseConfig);

class App extends React.Component {
    render() {
        return (
            <AppNavigator/>
        );
    }
}

export default App;

login.js

import React from 'react';
import {StyleSheet, View, Image, Text, KeyboardAvoidingView, StatusBar} 
from 'react-native';


import LoginForm from "./LoginForm";

class Login extends React.Component {

    render() {
        const { navigate } = this.props.navigation;
        return (
            <KeyboardAvoidingView behavior='padding' style=
{styles.container}>
                <View style={styles.logoContainer}>
                    <StatusBar barStyle="light-content"/>
                    <Image
                        style={styles.logo}
                        source=
{require('../../images/EquipRentIcon.png')}>
                    </Image>
                    <Text style={styles.title}>idostuff</Text>
                </View>
                <View style={styles.formContainer}/>
                <LoginForm/>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#3498db',
    },
    logo: {
        width: 160,
        height: 160
    },
    logoContainer: {
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'center'
    },
    title: {
        color: '#FFF',
        fontSize: 20,
        justifyContent: 'center'
    },
    formContainer: {}
});

export default Login;

loginForm.js

import React from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, StatusBar} from 'react-native';

import firebase from 'firebase';

// const auth = firebase.auth();
// const fbProvidor = new firebase.auth.FacebookAuthProvider();
// const googProvidor = new firebase.auth.GoogleAuthProvider();

class LoginForm extends React.Component {

    constructor(props) {
        super(props)

        this.submit = this.submit.bind(this);
        this.loginUser = this.loginUser.bind(this);
        this.createUser = this.createUser.bind(this);

        this.state = ({
            email: '',
            password: '',
            navigation: this.props.navigation
        })
    }

    loginUser = (email, password, ) => {
        try {
            if (this.state.password.length < 6) {
                alert("Please enter at least 6 characters")
                return;
            }
            firebase.auth().signInWithEmailAndPassword(email, password).then(function (user) {
                console.log(user)
            });
            this.submit()
        }
        catch (error) {
            console.log(error.toString())
        }
    };

    createUser = (email, password) => {
        try {
            if (this.state.password.length < 6) {
                alert("Please enter at least 6 characters")
                return;
            }
            firebase.auth().createUserWithEmailAndPassword(email, password).then(function () {
            });
            this.submit()

        }
        catch (error) {
            console.log(error.toString())
        }
    };

    submit() {
        this.props.navigation.navigate('Welcome');
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar barStyle="light-content"/>
                <TextInput
                    style={styles.input}
                    returnKeyType="next"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    placeholder="username"
                    onSubmitEditing={() => this.passwordInput.focus()}
                    onChangeText={(email) => this.setState({email})}
                    placeholderTextColor="rgba(255, 255, 255, 0.7)">
                </TextInput>

                <TextInput
                    style={styles.input}
                    placeholder="password"
                    secureTextEntry
                    returnKeyType="go"
                    ref={(input) => this.passwordInput = input}
                    onChangeText={(password) => this.setState({password})}
                    placeholderTextColor="rgba(255, 255, 255, 0.7)">
                </TextInput>

                <TouchableOpacity
                    style={styles.loginButtonContainer}
                    onPress={() => {
                        this.loginUser(this.state.email, this.state.password)
                    }}
                >
                    <Text style={styles.loginButtonText}>
                        Login
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.signupButtonContainer}
                    onPress={() => {
                        this.createUser(this.state.email, this.state.password)
                    }}
                >

                    <Text style={styles.signUpButtonText}>
                        Sign Up
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20
    },
    input: {
        height: 40,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        marginBottom: 15,
        fontSize: 20,
        paddingHorizontal: 10
    },
    loginButtonContainer: {
        backgroundColor: '#2980b9',
        padding: 15,
        justifyContent: 'center'
    },
    signupButtonContainer: {
        backgroundColor: 'white',
        opacity: .3,
        marginTop: 10,
        padding: 15,
        justifyContent: 'center'
    },
    loginButtonText: {
        textAlign: 'center',
        color: 'white',
        fontSize: 20,
        fontWeight: '700'
    },
    signUpButtonText: {
        textAlign: 'center',
        color: 'black',
        fontSize: 20,
        fontWeight: '700'
    }
});

export default LoginForm;

welcome.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class Welcome extends React.Component{

  render() {
      const { navigate } = this.props.navigation;
    return (
        <Text>
            this is the welcome screen
        </Text>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#3498db',
    },
});

export default Welcome;