属性'navigation'在类型 '{}' 中缺失，但在 react native 中的类型 '{ navigation: any; }' 中是必需的

Question

我刚刚创建了一个名为FirstComponent的组件，我想在主页组件中显示这个FirstComponent。

代码：-代码在这里

但它显示错误属性"navigation"在类型"｛｝"中丢失，但在类型"{navigation:any；}"中是必需的。注意，我使用的是最新的ReactNative，它支持tsx

Answer 1

当前，当您调用<FirstComponent />时，您说navigation道具是必需的，但您没有将navigation道具传递给它。

因此，解决方案是在调用navigation道具时添加它

<FirstComponent navigation={navigation} />

但据我所说，您可以做的不是将导航道具传递给FirstComponent，而是在FirstComponent中创建一个名为onPress的道具，这是一个必须在用户按下FirstComponent中的按钮时执行的函数。

因此，在折射之后，FirstComponent应该看起来像这个

import { View, Button } from 'react-native';
function FirstComponent({ onPress }: { onPress: () => void }) {
return (
<View>
<Button title="Login" onPress={onPress} />
</View>
);
}
export default FirstComponent;

你的HomeComponent看起来像这个

import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import FirstComponent from './components/FirstComponent';
export default function Home({ navigation }: { navigation: any }) {
return (
<View style={styles.container}>
// Notice this, I passed a function into FirstComponent 
// instead of passing the whole navigation object. 
// In this way I have extracted the navigation logic 
// out of the component and made it independent.
<FirstComponent onPress={() => navigation.navigate('Second_Screen')} />
</View>
);
}