反应导航错误未定义不是对象（评估_ref.navigation.navigate）

Question

编译后出现错误undefined不是对象（评估_ref.navigation.navigate）

试图将代码更改为

export const List = ({navigation}) =>

并相应地

 onPress = {() => navigation.navigate ('currentCard')}>

但是当我单击ToucOpacity时，得到的未定义不是对象（评估“ navigation.navigate”）

我研究了很多这样的解决方案，到处都是像我这样的代码被认为是“有效的”

我的App.js组件

import React from 'react';
import {CardList} from './src/screens/CardList';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {CurrentCard} from './src/screens/CurrentCard';

const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="CardList" component={CardList} />
        <Stack.Screen name="currentCard" component={CurrentCard} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

和带有错误的List.js组件

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ScrollView,
  Button,
  TouchableOpacity,
} from 'react-native';
export const List = ({navigation: {navigate}}) => {
  const data = [
    {
      id: '1',
      title: 'first',
    },
    {
      id: '2',
      title: 'second',
    },
    {
      id: '3',
      title: 'third',
    },
    {
      id: '4',
      title: 'fourth',
    },
    {
      id: '5',
      title: 'fifth',
    },
  ];
  return (
    <View>
      <FlatList
        data={data}
        contentContainerStyle={styles.list}
        renderItem={({item}) => (
          <TouchableOpacity
            style={styles.item}
            onPress={() => navigate('currentCard')}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={item => item.id}
      />
    </View>
  );
};