react-navigation中Cannot read property 'navigate' of undefined错误求助

这问题我在项目里碰过好多次，大概率是你在组件里没正确拿到navigation对象，或者使用方式不对，咱们一步步来排查解决：

常见原因及解决方案 #

1. 组件未被StackNavigator直接注入navigation prop #

如果你的组件是某个screen组件的子组件（比如LoginForm里嵌套了一个自定义按钮组件），直接在子组件里调用this.props.navigation就会报错——因为只有StackNavigator配置里的screen组件才会自动被注入navigation prop。

解决方法有两种：

• 通过props手动传递navigation：

  // 在LoginForm组件中
  import CustomLoginButton from './CustomLoginButton';
  
  class LoginForm extends Component {
    render() {
      // 把navigation传递给子组件
      return <CustomLoginButton navigation={this.props.navigation} />;
    }
  }
  

• 用withNavigation高阶组件包裹子组件：

  // 在子组件文件中
  import { withNavigation } from 'react-navigation';
  
  class CustomLoginButton extends Component {
    handleLogin = () => {
      // 现在就能正常调用navigate了
      this.props.navigation.navigate('EmployeeList');
    }
  
    render() {
      return <Button onPress={this.handleLogin} title="登录" />;
    }
  }
  
  // 用withNavigation包裹后导出
  export default withNavigation(CustomLoginButton);
  

2. 组件中未正确访问navigation prop #

• 如果是类组件，确保你是通过this.props.navigation访问，不要漏写this.props；
• 如果是函数组件，要通过解构props获取navigation：

  // 函数组件示例
  const LoginForm = ({ navigation }) => {
    return (
      <Button 
        onPress={() => navigation.navigate('EmployeeList')} 
        title="登录进入列表" 
      />
    );
  };
  

3. 检查StackNavigator配置完整性 #

你提供的代码里EmployeeCreate的navigationOptions没写完，虽然这不一定直接导致navigate错误，但完整的配置能避免其他潜在问题，建议补充完整并明确初始路由：

import { StackNavigator } from 'react-navigation';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';
import EmployeeCreate from './components/EmployeeCreate';

const RouterComponent = StackNavigator(
  {
    LoginForm: {
      screen: LoginForm,
      navigationOptions: { title: 'Please Login' }
    },
    EmployeeList: {
      screen: EmployeeList,
      navigationOptions: { title: 'Employee List' }
    },
    EmployeeCreate: {
      screen: EmployeeCreate,
      navigationOptions: { title: 'Create New Employee' }
    }
  },
  {
    // 明确设置初始路由，避免默认路由出错
    initialRouteName: 'LoginForm'
  }
);

export default RouterComponent;

4. 确保根组件是RouterComponent #

在你的App入口文件（比如App.js）里，要把RouterComponent作为根组件渲染，否则整个导航栈不会生效：

import RouterComponent from './Router';
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return <RouterComponent />;
  }
}

先从这几点排查，基本能解决大部分navigate undefined的问题，如果还有问题，可以补充下你调用navigate的具体代码，我再帮你看~

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