React Native中FlatList组件无法跳转页面的问题排查

问题描述 #

在React Native项目中，从FlatList组件内触发页面跳转时失败，抛出错误：

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

该跳转逻辑在应用其他非FlatList场景下正常，仅在FlatList组件内失效，尝试将navigation传入renderMyItem方法后问题仍未解决。

相关代码 #

FLToyCard组件代码 #

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>
  );
}

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 />
      </View>
    </View>
  )
}

export default ViewToys

解决方案 #

问题根源 #

FLToyCard组件声明需要接收navigation参数，但在ViewToys页面调用该组件时，未将ViewToys自身的navigation实例传递给它，导致FLToyCard内的navigation为undefined，调用navigate方法时触发错误。

修复步骤 #

1. 传递navigation给FLToyCard
   在ViewToys页面中，修改FLToyCard的调用代码，将navigation作为props传入：

<FLToyCard navigation={navigation} />

2. （可选）确认ToyCard组件的onPress绑定
   如果ToyCard是自定义组件，需确保它正确绑定传入的onPress回调到可交互元素上（比如TouchableOpacity）：

// ToyCard示例实现
import { TouchableOpacity, Text, Image } from 'react-native';

const ToyCard = ({ onPress, name, image, price, desc, seller }) => {
  return (
    <TouchableOpacity onPress={onPress} style={/* 你的卡片样式 */}>
      <Image source={image} />
      <Text>{name}</Text>
      <Text>${price}</Text>
      {/* 其他内容 */}
    </TouchableOpacity>
  );
};

export default ToyCard;

修改后的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} /> {/* 传递navigation */}
      </View>
    </View>
  )
}

export default ViewToys

内容的提问来源于stack exchange，提问作者paparonnie