我不确定这里出了什么问题，据我所知，我这样做是正确的，因为它在我的应用程序中的其他地方都有效。唯一的区别是我试图从 FlatList 组件执行此操作。这有什么问题？我也尝试过将 {navigation} 放在 renderMyItem 中而不是 FLToyCard 括号中，也没有用。我得到的错误是： TypeError：未定义不是对象（评估“navigation.navigate”） 。

import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'

import Toy from './Database'
import ToyCard from './ToyCard'

const FLToyCard = ({navigation}) => {
    
    const headerComp = () => {
        return(
            <View style={{alignSelf: 'center'}}>
                <Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
            </View>
        )
    }
    
    const renderMyItem = ({item}) => {
        return(
            <View style={{flex: 1}}>
                <ToyCard 
                name={item.name}
                image={item.image}
                price={item.price}
                desc={item.desc}
                seller={item.seller}
                onPress={()=>navigation.navigate('SlugProduct')}
                />
            </View>
        )
    }
    
    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={renderMyItem}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

这是我的 App.js：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import SlugProduct from './Screens/SlugProduct';

export default function App() {
  const Stack = createNativeStackNavigator()
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName='Login' >
             // list of other pages
             <Stack.Screen name="SlugProduct" component={SlugProduct} />
             <Stack.Screen name='ViewToys' component={ViewToys}
        </Stack.Navigator>
    </NavigationContainer>
  );
}

编辑：这是 FLToyCard 正在输入的 ViewToys 页面。我尝试将 onPress 添加到 Views 和 FLToyCard 中，但每次都出现相同的错误。

import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'

import FLToyCard from '../Components/FlatListCards'

const ViewToys = ({navigation}) => {
  return (
    <View style={{backgroundColor: '#ffce20', height: '100%'}}>
      <View>
        <FLToyCard />
      </View>
    </View>
  )
}

export default ViewToys