React新手求助：react-navigate导航报错undefined is not an object

嘿，作为和React Navigation打交道很久的开发者，这个报错我太熟悉了！别慌，这大概率是组件没正确拿到navigation属性导致的，咱们一步步排查解决：

最常见的原因&解决方案 #

1. 你的组件不是导航器直接管理的屏幕组件 #

只有被注册为导航器Screen的组件，才会自动获得navigation props。如果你的homeScreen是嵌套在另一个普通组件里（比如自定义布局组件、通用容器组件），那它肯定拿不到这个props。

解决办法：

• 函数组件：用useNavigation钩子直接获取导航对象，不用依赖props：

import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  // 直接拿到navigation对象
  const navigation = useNavigation();
  
  return (
    <Button 
      onPress={() => navigation.navigate("Home")} 
      title="跳转到首页" 
    />
  );
}

• 类组件：用withNavigation高阶组件包装你的组件，把导航属性注入进去：

import { withNavigation } from '@react-navigation/native';
import React from 'react';

class HomeScreen extends React.Component {
  render() {
    return (
      <Button 
        onPress={() => this.props.navigation.navigate("Home")} 
        title="跳转到首页" 
      />
    );
  }
}

// 必须用withNavigation包装后导出
export default withNavigation(HomeScreen);

2. 类组件忘记在构造函数里调用super(props) #

如果你的homeScreen是类组件，而且是直接作为导航器的屏幕，但还是报错，那大概率是构造函数里没写super(props)，导致this.props变成了undefined：

class HomeScreen extends React.Component {
  constructor(props) {
    super(props); // 这个一定要加！不然this.props就拿不到任何东西
    // 其他初始化代码
  }

  render() {
    return (
      <Button 
        onPress={() => this.props.navigation.navigate("Home")} 
        title="跳转到首页" 
      />
    );
  }
}

3. 导航器配置有问题 #

检查你的App.js，确保导航器的结构是正确的：

• 所有导航器必须包裹在NavigationContainer里
• 你的HomeScreen已经被正确注册为Stack.Screen（或者你用的其他导航器的Screen）

示例正确配置：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './homeScreen';
// 假设你要跳转到的页面是OtherScreen
import OtherScreen from './OtherScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        // 这里的name要和你navigate里的名称完全一致
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="OtherScreen" component={OtherScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

最后检查两个小细节 #

• 拼写是否正确：navigate不要拼错，跳转的屏幕名称要和导航器里注册的name完全一致（大小写也要匹配）
• 依赖是否安装完整：如果你是裸React Native项目，要确保已经安装了React Navigation的所有依赖（比如react-native-screens、react-native-safe-area-context），Expo项目则会自动处理这些。

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