React Native报错：Cannot read property 'navigation' of undefined 求助

你的错误根源有两个：

1. App.js中重复渲染了CategoriesScreen
   你在<NavigationContainer>之外单独渲染了<CategoriesScreen/>，这个独立的组件实例没有被React Navigation的导航栈管理，自然无法获取到navigation props，调用navigation.navigate时就会触发报错。

2. CategoriesScreen中导入了冗余的导航模块
   你在CategoriesScreen里导入了NavigationContainer和createNativeStackNavigator，但这些模块仅需在App.js这类根组件中使用，当前组件完全不需要，属于无用代码。

修正后的App.js代码 #

import { StyleSheet, Text, View, StatusBar } from 'react-native'; // 补充导入StatusBar
import CategoriesScreen from './screens/CategoriesScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MealsOverviewScreen from './screens/MealsOverviewScreen';

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <>
      <StatusBar style='light'/>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="MealsCategories" component={CategoriesScreen}/>
          <Stack.Screen name="MealsOverview" component={MealsOverviewScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
      {/* 删除此处单独渲染的CategoriesScreen */}
    </>
  )
}

修正后的CategoriesScreen代码 #

import { FlatList } from "react-native";
import { CATEGORIES } from "../data/dummy-data";
import GategoryGridTile from "../components/CategoryGridTale";

function CategoriesScreen({ navigation }){
    function renderCategoryItem(itemData){
        function pressHandler() {
          navigation.navigate('MealsOverview')
        }
        return (
          <GategoryGridTile 
            title={itemData.item.title}
            color={itemData.item.color} 
            onPress={pressHandler}
          />
        )
    }
    return (
        <FlatList
          data={CATEGORIES}
          keyExtractor={(item) => item.id}
          renderItem={renderCategoryItem}
          numColumns={2}
        />
    )
}

export default CategoriesScreen

修改后，只有被导航栈管理的CategoriesScreen实例会被渲染，它能正常获取到navigation对象，调用navigate方法就不会再报错了。

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