React Native报navigation.push未定义相关错误如何解决

这个报错的核心是你代码里的navigation对象为undefined，具体原因如下：

• 你没有配置React Navigation的NavigationContainer导航容器和栈导航规则，navigation对象是React Navigation框架注入给路由组件的专属属性，脱离导航上下文的组件无法直接获取该对象。
• 你当前直接在App.js中渲染MainMenu组件，没有向它传递navigation属性，也没有把它注册为路由页面，因此组件内部通过props拿到的navigation是空值。
• 你已经在MainMenu.js中引入了useNavigation钩子但没有调用，该钩子可以直接在导航上下文下的任意组件中获取navigation对象，你没有使用自然拿不到有效对象。
• 你没有将List页面注册到导航路由中，就算拿到有效navigation对象，调用push("List")也找不到对应页面。

第一步：安装必要依赖 #

如果还没安装React Navigation相关依赖，先执行以下命令：

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

第二步：修改App.js配置导航规则 #

替换原有App.js代码为以下内容，完成导航容器配置和路由注册：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { List } from './List';
import { MainMenu } from './MainMenu';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MainMenu">
        {/* 注册两个路由页面 */}
        <Stack.Screen name="MainMenu" component={MainMenu} />
        <Stack.Screen name="List" component={List} />
      </Stack.Navigator>
      <StatusBar style="auto" />
    </NavigationContainer>
  );
}

第三步：修改MainMenu.js获取有效navigation对象 #

调用已引入的useNavigation钩子获取导航对象，替换原有MainMenu.js代码：

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/core';

export const MainMenu = () => {
    // 调用钩子获取navigation对象
    const navigation = useNavigation();
    return (
        <View style={styles.container}>
          <Text>Hello HOW ARE YOU</Text>
          <Button title="Click" onPress={() => navigation.push("List")} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

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