React native 将导航从子组件传递到父组件getting TypeError

每当我尝试导航到另一个屏幕时，都会遇到问题。我在子组件中使用导航，即使我将道具传递给父组件，它也不起作用。这是我第一次使用react导航。我已经尝试了很多可能的解决方案，但仍然无法解决这个问题。我正在使用react navigation 5，需要帮助。我得到了这样一个错误：

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

Home.js//父组件
类Home扩展组件{
render（）{
返回(
this.props.navigation.navigate（'SiteAudit'））
}
)
}
}

Card.js//子组件
常量卡=（道具）=>{
返回(
{
props.navigation.navigateAction；
}}>
{props.title}
);
};

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/屏幕/仪表板”导入仪表板；
从“/screens/SiteAudit”导入SiteAudit；
const RootStack=createStackNavigator（）；
const DashboardStack=createStackNavigator（）；
const SiteAuditStack=createStackNavigator（）；
常量仪表板屏幕=（）=>{
返回(
);
};
const SiteAuditScreen=（）=>{
返回(
);
};
常量导航=（）=>{
返回(
);
};
导出默认导航；

按如下方式编辑卡视图

<Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      onPress={() => this.buttonPress()}
/>

const buttonPress = () => {
  this.props.navigation.navigate('Site Audit');
};

this.buttonPress（）}
/>
常量按钮按下=（）=>{
this.props.navigation.navigate（'Site Audit'）；
};

按如下方式编辑您的按钮

<TouchableOpacity
      style={styles.cardButton}
      onPress={onPress}
      <Text style={styles.cardTitle}>{this.props.title}</Text>
      <Image style={styles.imageCard} source={this.props.imgUri} />
</TouchableOpacity>

---

解决了这个问题，我只需要重新阅读react navigation的文档。我需要使用此处所述的
useNavigation

Cards.js//子组件
常量卡=（道具）=>{
返回(
{props.title}
);
};

Home.js//父组件
从'@react-navigation/native'导入{useNavigation}；
常量Home=（）=>{
const navigation=useNavigation（）；
返回(
{
导航。导航（“现场审计”）；
}}
/>
)
}
Hi，你怎么能在不知情的情况下假设他使用的是基于类的组件而不是功能组件，据我所知，functional component中不存在此关键字。@AyushiKeshri在functional components中我们不想使用prop.navigation.navigate这就是为什么我假设在functional components中我们使用navigation.navigateHi@RuchiraSwarnapriya，感谢您的评论，但它仍然不起作用。同样的错误。是的，我正在使用基于类的组件。对不起，我已经编辑了这篇文章。Hi@amrxlamn请参阅编辑后的回答我尝试了建议解决方案，但仍然出现相同的错误。我会尽力找到解决办法。谢谢大家!@RuchiraSwarnapriya
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Dashboard from './screens/Dashboard';
import SiteAudit from './screens/SiteAudit';

const RootStack = createStackNavigator();
const DashboardStack = createStackNavigator();
const SiteAuditStack = createStackNavigator();

const DashboardScreen = () => {
  return (
    <DashboardStack.Navigator>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
};

const SiteAuditScreen = () => {
  return (
    <SiteAuditStack.Navigator>
      <SiteAuditStack.Screen name="SiteAudit" component={SiteAudit} />
    </SiteAuditStack.Navigator>
  );
};

const Navigation = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Dashboard">
        <RootStack.Screen name="Dashboard" component={DashboardScreen} />
        <RootStack.Screen name="SiteAudit" component={SiteAuditScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

<Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      onPress={() => this.buttonPress()}
/>

const buttonPress = () => {
  this.props.navigation.navigate('Site Audit');
};

<TouchableOpacity
      style={styles.cardButton}
      onPress={onPress}
      <Text style={styles.cardTitle}>{this.props.title}</Text>
      <Image style={styles.imageCard} source={this.props.imgUri} />
</TouchableOpacity>

Cards.js // Child Component

const Cards = (props) => {
  return (
    <CardContainer
      backgroundColor={props.backgroundColor}
      onPress={props.navigationAction}>
      <CardWrapper>
        <CardTitle>{props.title}</CardTitle>
        <CardImage source={props.imgUri} />
      </CardWrapper>
    </CardContainer>
  );
};

Home.js // Parent Component

import {useNavigation} from '@react-navigation/native';

const Home = () => {
  const navigation = useNavigation();
  return (
    <Cards
      title="Completed"
      backgroundColor="#0082C8"
      navigationAction={() => {
        navigation.navigate('Site Audit');
      }}
    />
  )
}