我收到"Invariant Violation"错误的渲染方法做错了什么？

我正在启动一个新的React Native项目，我使用了"expo-init"并选择了一个空白的托管项目作为模板。我有几个来自不同项目的屏幕和组件，我想把它们复制到我的新项目中。我收到以下错误：

不变冲突：元素类型无效：应为内置组件(或类/函数(用于复合组件(但是得到了：未定义。您可能忘记从导出组件它在中定义的文件，或者您可能混淆了默认和命名进口。

检查CreateAccountForm的渲染方法。

我不知道发生了什么。我很确定我的所有设置都和我在第一个项目中所做的一样，这让一切都很好。我使用React Navigation，我的新项目将"HomeScreen"渲染为"initialRouteName"。然而，每当我试图将初始路由设置为"CreateNewAccountScreen"时，我都会收到上面的错误。

我已经测试过了，"CreateNewAccountScreen"将呈现propery作为我的初始路由，只要它不试图呈现嵌套在其中的"CreateAccountForm"组件。在用简单的<Text>Hi!<Text>替换<CreateAccountForm>组件后，它将屏幕和<Advertisement>组件一起呈现得很好，没有问题。

主页尖叫：

import React from 'react';
import { StyleSheet, Image, Button, View } from 'react-native';
import Advertisement from '../components/Advertisement';
const HomeScreen = ({navigation}) => {
return (
<View style={styles.mainContainer}>
<View style={styles.logoContainer}>
<Image style={styles.logo}
source={require('../assets/TPLookupLogo.png')} 
style={{height: 200, width: 350, marginBottom: 40}} 
resizeMode="contain">
</Image>
</View>
<View style={styles.btnsContainer}>
<Button 
style={styles.button}
appearance="outline"
onPress={()=>{console.log('To New User')}}
title='New User'
/>
<Button 
style={styles.button} 
appearance="outline"
onPress={()=>{console.log('To Login')}}
title='Login'
/>
</View>
<View style={styles.adContainer}>
<Advertisement/>
</View>
</View>
);
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
justifyContent: 'center', 
alignItems: 'center',
},
logoContainer: {
flex: 4,
justifyContent: 'flex-end', 
alignItems: 'center'
},
btnsContainer: {
flex: 4,
width: '40%',
justifyContent: 'flex-start', 
},
button: {
marginVertical: 4,
},
adContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
}
})
export default HomeScreen; 

AppNavigator：

import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import CreateNewAccountScreen from '../screens/CreateNewAccountScreen';
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
CreateNewAccount: CreateNewAccountScreen
},
{
initialRouteName: 'CreateNewAccount'
}
)
export default AppNavigator;

创建新帐户屏幕：

import React from 'react';
import { StyleSheet, View } from 'react-native'
import CreateAccountForm from '../components/CreateAccountForm';
import Advertisement from '../components/Advertisement';
const CreateNewAccountScreen = () => {
return (
<View style={styles.mainContainer}>
<View style={styles.formContainer}>
<CreateAccountForm/>
</View>
<View style={styles.adContainer}>
<Advertisement/>
</View> 
</View>     
);
}

const styles = StyleSheet.create({
mainContainer:{
flex: 1,
},
formContainer: {
flex: 8,
},
adContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black'
}
})
CreateNewAccountScreen.navigationOptions = {
headerTitle: 'Create Account'
}
export default CreateNewAccountScreen;

CreateAccountForm:

import React, { useState } from 'react';
import { StyleSheet, View, Input, Button } from 'react-native';
const CreateAccountForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [company, setCompany] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [address, setAddress] = useState('');
const [city, setCity] = useState('');
const [stateName, setStateName] = useState('');
const [zip, setZip] = useState('');
const onChangeEmailHandler = value => {
setEmail(value);
}
const onChangePasswordHandler = value => {
setPassword(value);
}
const onChangeCompanyHandler = value => {
setCompany(value);
}
const onChangeFirstNameHandler = value => {
setFirstName(value);
}
const onChangeLastNameHandler = value => {
setLastName(value);
}
const onChangeAddressHandler = value => {
setAddress(value);
}
const onChangeCityHandler = value => {
setCity(value);
}
const onChangeStateNameHandler = value => {
setStateName(value)
}
const onChangeZipHandler = value => {
setZip(value);
}
const RegisterUserHandler = props => {
let emailLength = email.length;
let passwordLength = password.length;
if (emailLength === 0 || passwordLength === 0)
{
console.log('Email & Password cannot be blank.');
}
else
{
registerUser()
}
}
async function registerUser () {
let headers = {
'X-Authorization': "",
'Accept': 'application/json',
'Content-Type': 'application/json',
};
let body = JSON.stringify({
Email: email,
Password: password,
Company: company,
FirstName: firstName,
LastName: lastName,
Address: address,
City: city,
State: stateName,
Zipcode: zip
})
let response = await fetch('', 
{
method: 'POST',
headers: headers,
body: body
});
let responseJson = await response.json()
}
return (
<View style={styles.mainContainer}>
<Input
style={styles.input}
type="text"
value={email}
placeholder="Email"
onChangeText={onChangeEmailHandler}
/>
<Input
style={styles.input}
type="text"
value={password}
placeholder="Password"
onChangeText={onChangePasswordHandler}
/>
<Input
style={styles.input}
type="text"
value={company}
placeholder="Company"
onChangeText={onChangeCompanyHandler}
/>
<Input
style={styles.input}
value={firstName}
placeholder="First Name"
onChangeText={onChangeFirstNameHandler}
/>
<Input
style={styles.input}
value={lastName}
placeholder="Last Name"
onChangeText={onChangeLastNameHandler}
/>
<Input
style={styles.input}
value={address}
placeholder="Address"
onChangeText={onChangeAddressHandler}
/>
<View style={styles.rowInputsContainer}>
<Input 
style={styles.input}
value={city}
style={styles.rowInput}
placeholder="City"
onChangeText={onChangeCityHandler}
/>
<Input
style={styles.input}
value={stateName}
style={{...styles.rowInput, ...styles.centerRowInput}}
placeholder="State"
onChangeText={onChangeStateNameHandler}
/>
<Input
style={styles.input}
value={zip}
style={styles.rowInput}
placeholder="Zip"
onChangeText={onChangeZipHandler}
/>
</View>
<Button 
style={styles.btn}
onPress={RegisterUserHandler}
title='Register'
/>
</View>
)   
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
width: '75%',
alignSelf: 'center',
justifyContent: 'center',
},
rowInputsContainer: {
display: 'flex',
flexDirection: 'row',
marginBottom: 16
},
rowInput: {
flexGrow: 1,
},
centerRowInput: {
marginHorizontal: 4
},
input: {
marginVertical: 8
}
})
export default CreateAccountForm;

在我的第一个应用程序中，这个完全相同的设置使一切都很好，没有问题。所以我不明白我哪里错了。任何帮助，非常感谢，谢谢，和平！