Компонент маршрута "WelcomeScreen" должен быть реагирующим компонентом

Question

У меня проблема с этим маленьким кусочком кода. Я почти везде искал эту ошибку, но она не решила мою проблему. Я использовал все методы, данные экспертами относительно t , введите описание изображения здесь , чтобы решить проблему. Пожалуйста, если кто-нибудь может помочь.

/// 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;

** Я использовал все техники, специально предназначенные для экспорта найденных вещей, но безрезультатно *

Вот Welcom.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>


        );
    }
}

Answer 1

Я думаю, что вы неправильно создаете навигатор в createStackNavigator (). Попробуйте это:

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

  SignUpScreen: {
    screen: SignUpScreen
  },
 ContinueAsGuestScreen: {
   screen: ContinueAsGuestScreen
  },
});