如何使用堆栈导航器通过按一下按钮从一个屏幕导航到另一个屏幕？

当我按下可触摸的不透明样式按钮时，我希望从登录屏幕导航到注册屏幕。我还想将初始屏幕设置为登录屏幕。但是，在尝试对他人有用的解决方案时，我会得到错误或意外的行为。下面是我的LoginForm类的一部分，它是按下按钮的地方。

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

export default class LoginForm extends Component {
    startRegistration() {
            this.props.navigation.navigate('Registration');
    }

<TouchableOpacity onPress={this.startRegistration} style={style
s.buttonRegister}>
           <Text style={styles.buttonText}>REGISTER</Text>
</TouchableOpacity>

按下注册按钮时，它将调用startRegistration函数。这是我的App.js类：

import React, {Component} from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";

import Login from './src/components/login/Login';
import Registration from './src/components/login/Registration';

export default class FastAttendance extends Component {
        render() {
                return <AppContainer />
        }
}

const AppNavigator = createStackNavigator({
        Login: {screen: Login},
        Registration: {screen: Registration},
},
{
        initialRouteName: 'Login',
}
);

const AppContainer = createAppContainer(AppNavigator);

当我尝试运行此程序时，我的登录屏幕似乎正常，但是当我单击注册按钮时，出现错误“未定义不是对象（正在评估'this.props.navigation'）”。如其他线程中所建议，我已将this.props删除到此代码中

navigation.navigate('Registration');

但是，当我单击注册按钮时，出现错误“找不到变量：导航”

我尝试过的另一种变化是将App.js文件中的createStackNavigator函数更改为：

 const AppNavigator = createStackNavigator({
    screen: Login,
    screen: Registration
 });

显然没有初始路径表明行为异常，并且在启动应用程序时，应用程序直接进入注册屏幕，但没有错误。我的createStackNavigator函数是否有问题或其他问题？