Javascript 我使用的渲染方法'；“我收到”；不变违反“；错误？
我正在启动一个新的React原生项目，我使用了“expo init”，并选择了一个空白的托管项目作为我的模板。我有两个来自不同项目的屏幕和组件，我想复制到我的新项目中。我收到以下错误： 不变冲突：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记了从导出组件 它在其中定义的文件，或者您可能混淆了默认值和名称 进口 检查Javascript 我使用的渲染方法'；“我收到”；不变违反“；错误？,javascript,reactjs,react-native,expo,react-native-navigation,Javascript,Reactjs,React Native,Expo,React Native Navigation,我正在启动一个新的React原生项目，我使用了“expo init”，并选择了一个空白的托管项目作为我的模板。我有两个来自不同项目的屏幕和组件，我想复制到我的新项目中。我收到以下错误： 不变冲突：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记了从导出组件 它在其中定义的文件，或者您可能混淆了默认值和名称 进口 检查CreateAccountForm的渲染方法 我不知道发生了什么事。我很确定我的所有设置都和我在第一个项目中做的一样，都很好。我正在使
CreateAccountForm我已经对它进行了测试，“CreateNewAccountScreen”将呈现Property作为我的初始路由，只要它不试图呈现嵌套在其中的“CreateAccountForm”组件。将
Hiimport 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;
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;
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;
CreateNewAccountScreen:
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;
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;
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;
从“React”导入React；
从“react native”导入{样式表，视图}
从“../components/CreateAccountForm”导入CreateAccountForm；
从“../components/Advertision”导入播发；
const CreateNewAccountScreen=（）=>{
返回(
);
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
},
formContainer：{
弹性：8，
},
adContainer：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“黑色”
}
})
CreateNewAccountScreen.navigationOptions={
标题：“创建帐户”
}
导出默认CreateNewAccountScreen；
CreateAccountForm:
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;
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;
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;
import React，{useState}来自“React”；
从“react native”导入{样式表、视图、输入、按钮}；
const CreateAccountForm=（）=>{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[company，setCompany]=使用状态（“”）；
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 onchangemailhandler=value=>{
设置电子邮件（值）；
}
const onChangePasswordHandler=值=>{
设置密码（值）；
}
const onChangeCompanyHandler=value=>{
设定公司（价值）；
}
const onChangeFirstNameHandler=值=>{
setFirstName（值）；
}
const onChangeLastNameHandler=值=>{
setLastName（值）；
}
const onChangeAddressHandler=值=>{
设置地址（值）；
}
const onChangeCityHandler=值=>{
设定值；
}
const onChangeStateNameHandler=值=>{
setStateName（值）
}
const onChangeZipHandler=value=>{
setZip（值）；
}
常量RegisterUserHandler=props=>{
让emailLength=email.length；
让passwordLength=password.length；
if（emailLength==0 | | passwordLength==0）
{
console.log（'电子邮件和密码不能为空'）；
}
其他的
{
registerUser（）
}
}
异步函数注册器（）{
让标题={
“X-授权”：“，
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
};
让body=JSON.stringify({
电邮:电邮,，
密码：密码，
公司:公司,，
名字：名字，
LastName:LastName，
地址:地址:，
城市:城市,，
州：州名，
Zipcode:zip
})
let response=等待获取（“”，
{
方法：“POST”，
标题：标题，
身体：身体
});
让responseJson=wait response.json（）
}
返回(
)
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
宽度：“75%”，
对齐自我：“中心”，
为内容辩护：“中心”，
},
行输入容器：{
显示：“flex”，
flexDirection:'行'，
marginBottom:16
},
行输入：{
flexGrow:1，
},
centerRowInput：{
marginHorizontal:4
},
输入：{
利润率：8
}
})
导出默认CreateAccountForm；
在我的第一个应用程序中，这个完全相同的设置使一切都很好。所以我不明白我哪里出错了。任何帮助，非常感谢，谢谢，和平 React Native有
TextInputInputCreateAccountFormCreateAccountF，它能工作吗