TypeError: undefined is not an object (evaluating 'navigation.navigate') - React Navigation

我正在使用 onPress 处理 TouchaleOpacity 以导航到名为“Infocli”的屏幕，但不起作用...... (onPress={() => navigation.navigate('Infocli')}) 该错误 TypeError: undefined 是不是对象（评估“navigation.navigate”）

应用程序.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './telas/Home';
import Login from './telas/Login';
import Clientes from './telas/Clientes';
import Pedidos from './telas/Pedidos';
import Produtos from './telas/Produtos';
import Sincro from './telas/Sincro';
import Cadastro from './telas/Cadastro';
import Infocli from './telas/Infocli';

export default function App() {

  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Login'>
        <Stack.Screen options={{headerShown:false}} name='Home' component={Home}  />
        <Stack.Screen options={{headerShown:false}} name='Login' component={Login}  />
        <Stack.Screen options={{headerShown:false}} name='Clientes' component={Clientes}  />
        <Stack.Screen  name='Infocli' component={Infocli}  />
        <Stack.Screen  name='Pedidos' component={Pedidos}  />
        <Stack.Screen options={{headerShown:false}} name='Produtos' component={Produtos}  />
        <Stack.Screen options={{headerShown:false}} name='Cadastro' component={Cadastro}  />
        <Stack.Screen name='Sincro' component={Sincro}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

屏幕出现错误

import React, {useState} from 'react';
import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native';

export default function ListItem ({ data, navigation}) {


  return (

      <TouchableOpacity 
        onLongPress={() => {alert('FUNFOU !')}} style={styles.item}
        onPress={() => navigation.navigate('Infocli')}
      >
        <View style={{flexDirection:'row',justifyContent:'flex-start', alignItems:'center'}}>
          <Image source={require('../../assets/spartan.png')} style={styles.itemPhoto} />
          <View style={styles.itemInfo}>
            <Text style={styles.itemP1}>{data.cod} - {data.name}</Text>
            <Text style={styles.itemP2}>{data.cnpj_cpf}</Text>
            <Text style={styles.itemP2}>{data.cidade} - {data.estado}</Text>
          </View>
        </View>
      </TouchableOpacity>
      
  );
};