React Navigation报错：Undefined is not an object (evaluating 'this.props.navigation.navigate')

这个错误的核心原因是你的Login组件没有获取到navigation属性，导致调用this.props.navigation.navigate时触发了未定义对象的访问错误。结合你的代码，我整理了几个关键排查点和解决方案：

1. 确认根组件是否正确渲染了AppNavigation #

这是最常见的触发原因：如果你的App入口文件（比如App.js）直接渲染Login组件，而不是通过AppNavigation这个StackNavigator来管理页面跳转，那么Login就不会被自动注入navigation props。

正确的做法：在App.js中导入并渲染AppNavigation作为根组件：

import React from 'react';
import { AppNavigation } from './Router'; // 根据你的实际文件路径调整

export default function App() {
  return <AppNavigation />;
}

2. 验证Router.js中的导航配置 #

你的AppNavigation配置逻辑是正确的，但需要再次确认：

• Login组件确实被正确注册为LoginScreen的screen属性值
• 跳转目标Tabs对应的MainScreenNavigator已经完整定义并注册到StackNavigator中

3. 确认login方法的this绑定（你已处理，可跳过验证） #

你已经将login方法改为箭头函数写法：

login = () => {
  console.log("login function");
  this.props.navigation.navigate('Tabs');
}

这种写法会自动绑定组件实例的this，配合onPress={this.login}的调用方式是完全正确的，这部分不是当前错误的诱因。

额外排查：react-navigation版本兼容性 #

你使用的TabNavigator和StackNavigator是react-navigation v1/v2的API，如果你的项目安装的是v3及以上版本，这些API已被废弃（替换为createStackNavigator、createBottomTabNavigator等）。如果是版本不匹配的情况，需要修改导航配置为新版本语法：

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export const MainScreenNavigator = createBottomTabNavigator({
  Home: { /* 原有配置不变 */ },
  MyCards: { /* 原有配置不变 */ },
}, { /* 原有选项不变 */ });

export const AppNavigation = createStackNavigator({
  LoginScreen: { screen: Login },
  Tabs: { screen: MainScreenNavigator},
  AddCard: { screen: AddCard }
}, { headerMode: 'screen' });

优先从第1点开始排查，直接渲染Login而非导航器是触发该错误的最常见场景。

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