为什么我不能导航到另一个页面从FlatList组件在react native?

Question

我不确定这里出了什么问题，据我所知，我这样做是正确的，因为它在我的应用程序的其他地方都有效。唯一的区别是，我试图从FlatList组件做到这一点。这有什么不对吗?我也试过把{导航}在renderMyItem而不是FLToyCard括号，也没有工作。我得到的错误是:TypeError: undefined is not an object (evaluating '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添加到视图和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

Answer 1

问题是你没有通过navigation props从屏幕ViewToysinto componentFLToyCard.

试试这个

在ViewToys屏幕:

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 navigation={navigation}/>
</View>
</View>
)
}
export default ViewToys

Answer 2

将<FLToyCard />更改为<FLToyCard navigation={navigation} />你就完成了。

你在FLToyCard组件的导航中得到未定义，这就是为什么你得到这个错误。

Answer 3

这个错误是当我们没有把这些提到在一个页面
import { NavigationContainer,useFocusEffect } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
所以我认为把上面放在每一个页面一旦你的问题就会解决，