如何解决错误"the expected type comes from property 'component' which is declared here on type"？

Question

在我的代码中，我试图创建一个堆栈导航器。

这是我做的堆栈导航器。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import EnterPassword from '../screens/EnterPassword';
import EnterAccount from '../screens/EnterAccount';
const GoogleLoginStack = createStackNavigator();
const GoogleLogin = () => {
return (
<GoogleLoginStack.Navigator>
<GoogleLoginStack.Screen name='EnterAccount' component={EnterAccount} />
<GoogleLoginStack.Screen name='EnterPassword' component={EnterPassword} />
</GoogleLoginStack.Navigator>
)
};

export default GoogleLogin;

然后在App.tsx文件中使用:

...
<Stack.Screen name="Login" component={Login} />
<GoogleLogin />
<Stack.Screen name="SignUp" component={SignUp} />
...

我创建的屏幕如下所示:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const EnterAccount = (props: any) =>  {
<View style={styles.screen}>
<Text>
Enter Account Screen
</Text>
</View>
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
export default EnterAccount;

然而，我得到这个错误:错误文本:https://i.stack.imgur.com/zKbAa.png

我知道这是因为我如何定义道具的类型，但我不确定什么是正确的方式来定义道具的类型。

非常感谢你的帮助!

Answer 1

您没有返回输入帐户组件的JSX，这就是为什么您得到错误，在该组件中添加返回语句

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const EnterAccount = (props: any) =>  {
return (
<View style={styles.screen}>
<Text>
Enter Account Screen
</Text>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
export default EnterAccount;