路由"WelcomeScreen"的组件必须是反应组件

Question

我对这一小段代码有问题。我几乎到处搜索过这个错误，但它并没有解决我的问题。我已经使用了专家给出的关于 tenter 图像描述问题的所有方法。如果有人可以帮忙，请。

//

/应用.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;

**我已经使用了所有专门导出我发现的东西但没有帮助的技术*

这里是欢迎.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
  },
});