在添加导航插件时，无法正常显示错误

Question

react-native的新功能，并尝试使用示例应用程序使react-native。 我创建了两个屏幕。登录和表单屏幕。 我想要单击登录按钮后，它将进入表单屏幕。我添加了导航库以进行路由。 但是显示错误。

  App.js

 import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, View} from 'react-native';
 import {StackNavigator} from 'react-navigation';
 import Login from './src/pages/pages/Login';
 import Form from './src/pages/pages/Form';


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


  export default class App extends Component<{}> {

    render() {

     return (
     <View style ={styles.container}>
      <AppNavigator/>




       </View>

           );
           }
             }

       const styles = StyleSheet.create({
         container: {
             flex: 1,
               justifyContent: 'center',
                  alignItems: 'center'
                             }

                                   })

Login.js

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

                            } from 'react-native';




                export default class Login extends Component {


                 state = {
                      username: '', password: ''
                           }
                     onChangeText = (key, val) => {
                     this.setState({ [key]: val })
                              }
                       signUp = async () => {
                     const { username, password } = this.state
                     try {
                       // here place your signup logic
                     console.log('user successfully signed up!: ',         success)
           } catch (err) {
         console.log('error signing up: ', err)
                    }
                           }

          render() {


            return (
             <View style={styles.container}>
             <TextInput
             style={styles.input}
             placeholder='Username'
                autoCapitalize="none"
             placeholderTextColor='white'
            onChangeText={val => this.onChangeText('username', val)}
             />
           <TextInput
             style={styles.input}
                placeholder='Password'
                secureTextEntry={true}
                autoCapitalize="none"
                placeholderTextColor='white'
                 onChangeText={val => this.onChangeText('password', val)}
                    />

                <TouchableOpacity
                style={styles.button}
         onPress={() => this.props.navigation.navigate('Form') } title =   "Form"

            >
               <Text > LOGIN </Text>
              </TouchableOpacity>

               </View>
                   );
                       }
                          }

            const styles = StyleSheet.create({
          input: {
          width: 350,
          height: 55,
           backgroundColor: '#ff4000',
              margin: 10,
             padding: 8,
             color: 'white',
             borderRadius: 4,
              fontSize: 18,
             fontWeight: '500',
                       },
                       container: {
                       flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center'
                             },

                             button: {
                                alignItems: 'center',
                                   backgroundColor: '#58d63b',
                                                padding: 10,
                                                 width:320,
                                                    height:55
                                                           }

                                                              })

Form.js

   import React, {Component} from 'react';
      import {View,Text} from 'react';


       export default class Login extends Component {
         render() {
         return (

             <View>
                 <Text> This Is Form Page</Text>
                </View>

                  );   
                      }
                             }

index.js

  import {AppRegistry} from 'react-native';
     import App from './App';
       import {name as appName} from './app.json';

       AppRegistry.registerComponent(appName, () => App);

THIS IS THE ERROR I HAVE GETTING ALL THE TIME

我尝试了所有清除缓存并重新安装npm的方法，但是没有运气。 任何人都可以提供帮助。太好了。