React Navigation报错：Undefined is not an object，登录页跳转主页失败

问题回顾 #

你遇到的情况是：点击登录按钮后alert弹窗正常弹出，但调用this.props.navigation.navigate('Tabs')时触发了Undefined is not an object evaluating (_this.props.navigation.navigate())错误，Login组件和路由配置代码已经提供。

问题根源 #

从你的代码来看，路由配置AppNavigation本身是正确的，但最大的可能性是你没有将AppNavigation作为应用的根组件来渲染。React Navigation的navigation props只会自动注入到被导航器直接包裹的组件中，如果你的入口文件直接渲染了<Login />而不是<AppNavigation />，Login组件就无法获取到navigation这个props，自然会报错。

另外，你的login方法用了箭头函数，this的指向是正确的（alert能正常触发也证明了这一点），所以排除this绑定的问题。

解决方案 #

1. 将AppNavigation设置为应用根组件

找到你的应用入口文件（通常是App.js或者index.js），把原来直接渲染Login组件的代码，改成渲染AppNavigation：

import React, { Component } from 'react';
// 替换成你的Router.js实际路径
import { AppNavigation } from './src/Router'; 

export default class App extends Component {
  render() {
    // 这里要渲染AppNavigation，而不是<Login />
    return <AppNavigation />;
  }
}

这样Login组件作为AppNavigation中定义的LoginScreen路由对应的页面，就会自动被注入navigation props，调用navigate方法就不会报错了。

2. 额外验证（可选）

如果修改根组件后还是有问题，可以在Login组件的render方法里添加日志，确认navigation props是否被正确注入：

render (){
  console.log('当前navigation props:', this.props.navigation);
  return (
    // 原组件内容
  );
}

如果控制台打印出undefined，那说明你的Login组件还是没有被导航器正确包裹；如果打印出包含navigate等方法的对象，那再检查navigate的目标路由名称是否正确（你的代码里目标是Tabs，路由配置里确实存在，所以这个是对的）。

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