路径“Main”的组件必须是React组件

Question

我是React Native的新手，并实施react-navigation来理解这个概念，但却收到错误。我通过不同的链接搜索它，因为The component for route 'Feed' must be a React component和我根据这个问题的答案更改了import和export，但同样的错误仍然存​​在。我的代码如下，

MainScreenNavigation.js

import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
// import HomeScreen from '../screens/Home/HomeScreen';
// import Profile from '../screens/Profile/Profile'

export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
    Splash: Splash,
    Main: SigninNavigator,
},  {
        initialRouteName: 'Splash'
    },
)
);

const SigninNavigator = createSwitchNavigator({
    Signin: Signin,
    // Home: HomeNavigator,
},  {
        initialRouteName: 'Signin'
    },
);

// const HomeNavigator = createStackNavigator({
//     Profile: Profile,
//     HomeScreen: HomeScreen,
// },
//     {
//         initialRouteName: 'HomeScreen'
//     }
// );

App.js

import React, {Component} from 'react';
import {MainScreenNavigation} from "./src/navigations/MainScreenNavigation";

class App extends Component {
    render() {
        return (
            <MainScreenNavigation />
        );
    }
}

export default App;

Splash.js

import React from 'react';
import {ImageBackground, StatusBar, View, Text, TouchableOpacity} from 'react-native';
import { Logo } from '../../components/Logo';
import { styles } from './styles';

class Splash extends React.Component{

    gotoSigninScreen = () => {
        this.props.navigation.navigate("Main");
      };

    render(){
        return(

            <ImageBackground
                source={require('../../assets/splash.png')}
                style={styles.imageBackgroundStyle}>

                <StatusBar backgroundColor='#3F91D6'
                    barStyle='light-content' />

                <View style={styles.container}>
                    <View style={styles.upperBody}>

                        <View style={styles.containerInside}>
                            <Logo />
                            <Text style={styles.upperBodyText}>Track, Drive & Deliever</Text>
                        </View>

                    </View>

                    <View style={styles.lowerBody}>
                        <TouchableOpacity style={styles.buttonContainer}
                            onPress={() => navigate('Signin')}>
                            <Text style={styles.buttonText}>Get Started</Text>
                        </TouchableOpacity>
                    </View>

                </View>

            </ImageBackground>
            )
    }
}

export default Splash;

Signin.js

import React from 'react';
import {TouchableOpacity, Text, TextInput, View, KeyboardAvoidingView} from 'react-native';
import {styles} from './styles';
import {Logo} from "../../components/Logo";
import {hintColor} from "../../prefabs/colors";

class Signin extends React.Component {

    gotoHomeScreen = () => {
        this.props.navigation.navigate("Home");
      };

    render() {
        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>

                <Logo/>

                <View style={styles.formContainer}>
                    <TextInput style={styles.input}
                               autoCapitalize="none"
                               onSubmitEditing={() => this.passwordInput.focus()}
                               autoCorrect={false}
                               keyboardType='email-address'
                               returnKeyType="next"
                               placeholder='Email'
                               placeholderTextColor={hintColor}/>

                    <TextInput style={styles.input}
                               returnKeyType="go"
                               ref={(input) => this.passwordInput = input}
                               placeholder='Password'
                               placeholderTextColor= {hintColor}
                               secureTextEntry/>

                    <TouchableOpacity style={styles.buttonContainer}

                                        // onPress={this.gotoHomeScreen}
                                        >

                        <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

export default Signin;

这个代码实际上出了什么问题以及如何修复它？

Answer 1

我通过如下改变我的MainScreenNavigation.js摆脱了这个错误

MainScreenNavigation.js

import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
import HomeScreen from '../screens/Home/HomeScreen';
import Profile from '../screens/Profile/Profile';

const HomeNavigator = createStackNavigator({
    Profile: Profile,
    HomeScreen: HomeScreen,
},
    {
        initialRouteName: 'HomeScreen'
    }
);

const SigninNavigator = createSwitchNavigator({
    Home: HomeNavigator,
    Signin: Signin,
},  {
        initialRouteName: 'Signin'
    },
);

export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
    Main: SigninNavigator,
    Splash: Splash,
},  {
        initialRouteName: 'Splash'
    },
)
);