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

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

Home.js // Parent Component

class Home extends Component {
  render() {
    return (
      <Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      navigateAction={() =>
        this.props.navigation.navigate('SiteAudit')
      }
    )
  }
}

Card.js // Child Component

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

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;