react-native - ルート「WelcomeScreen」のコンポーネントは反応コンポーネントでなければなりません

Question

この小さなコードに問題があります。このエラーについてどこでもほとんど検索しましたが、問題は解決しませんでした。ここに画像の説明を入力するハット問題に関して、専門家によって提供されたすべての方法を使用しました。誰か助けてください。

///app.js

     import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
    import React, {Component} from 'react';
    import {AppRegistry} from 'react-native';
    import WelcomeScreen from './Components/Welcome/Welcome';
    import SignInScreen from './Components/SingIn/SingIn';
    import SignUpScreen from './Components/SingUp/SingUp';
    import ContinueAsGuestScreen from './Components/ContinueAsGuest/ContinueAsGuest';

     const RootStack = createStackNavigator({
      WelcomeScreen: {
        WelcomeScreen: WelcomeScreen
      },
      SignInScreen: {
       SignInScreen: SignInScreen
      },

      SignUpScreen: {
        SignUpScreen: SignUpScreen
      },
     ContinueAsGuestScreen: {
       ContinueAsGuestScreen: ContinueAsGuestScreen
      },

    });

    const App = createAppContainer(RootStack);

    export default App;

**私が見つけたものを特別にエクスポートするすべてのテクニックを使用しましたが、役に立ちませんでした*

こちらがWelcome.jsです

    import React, { Component } from 'react';
import { Platform, AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
import { ScrollView } from 'react-native-gesture-handler';



export default class Welcome extends Component {
    static navigatonOptions =
        { title: 'Welcome Screen' };


    constructor(props) {
        super(props);
        this.handleButton = this.handleButton.bind(this);
        state =
            {
                Firstname: '',
                Lastname: '',
                EmailAddress: '',
                PhoneNumber: '',
                CompanyName: '',
                OtherEmailAddress: ''
            }

    }
    handleFirstName = (text) => {
        this.setState({ FirstName: text })
    }
    handleLastName = (text) => {
        this.setState({ Lastname: text })
    }
    handleEmailAddress = (text) => {
        this.setState({ EmailAddress: text })
    }
    handlePhoneNumber = (text) => {
        this.setState({ PhoneNumber: text })
    }
    handleCompanyName = (text) => {
        this.setState({ CompanyName: text })
    }
    handleOtherEmailAddress = (text) => {
        this.setState({ OtherEmailAddress: text })
    }


    handleButton = () => {
        this.props.navigation.navigate("SignInScreen");
    }
    render() {

        return (


            <ScrollView style={styles.container} >
                <View style={styles.header}>
                    <Text style={{ fontSize: 20 }}> Profile </Text>
                </View>
                <View>
                    <Text style={{ fontSize: 20, alignSelf: "center" }}> Welcome here  </Text>
                </View>

                <Text>FIRST NAME *</Text>
                <TextInput style={styles.input}
                    placeholder="Firstname"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handleFirstName}
                />


                <Text>LAST NAME *</Text>
                <TextInput style={styles.input}
                    placeholder="LastName"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handleLastName}
                />

                <Text>Email Address *</Text>
                <TextInput style={styles.input}
                    placeholder="Email Address"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handleEmailAddress}
                />

                <Text>PHONE NUMBER *</Text>
                <TextInput style={styles.input}
                    placeholder="Phone Number"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handlePhoneNumber}
                />

                <Text>COMPANY NAME *</Text>
                <TextInput style={styles.input}
                    placeholder="Company Name"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handleCompanyName}
                />

                <Text>OTHER EMAIL ADDRESS *</Text>
                <TextInput style={styles.input}
                    placeholder="Other Email Address"
                    placeholderTextColor="#9a73ef"
                    AutoCapitalization="none"
                    onChangeText={this.handleOtherEmailAddress}
                />



                <TouchableOpacity style={styles.submitButton2} onPress={() => this.handleButton} >
                    <Text style={styles.submitButtonText}> Save </Text>
                </TouchableOpacity>




            </ScrollView>


        );
    }
}