React Native报错：undefined is not an object evaluating _this.props.navigation

你遇到的这个报错本质是组件无法获取到navigation prop，尤其是当你把导航逻辑抽离成独立组件/模块时，很容易出现这个问题。下面我给你几个靠谱的解决方案，帮你既能复用导航逻辑，又能彻底解决这个报错：

一、利用withNavigation高阶组件（类组件适用） #

如果你的抽离组件是类组件，react-navigation提供的withNavigation可以给没有直接嵌套在导航器里的组件注入navigation prop。

修改步骤： #

1. 先导入withNavigation：

import { withNavigation } from '@react-navigation/native'; // v5+版本用这个，旧版本直接用react-navigation

2. 把你的抽离组件用withNavigation包裹后导出：
   比如你抽离的导航逻辑组件是NavigationHandler：

class NavigationHandler extends Component {
  navigateToDetail = (item) => {
    this.props.navigation.navigate('Detail', { item });
  };

  render() {
    // 这里可以返回你的复用UI或逻辑触发元素
    return (
      <TouchableOpacity onPress={() => this.navigateToDetail(someItem)}>
        <Text>跳转到详情</Text>
      </TouchableOpacity>
    );
  }
}

// 关键：用withNavigation包裹后导出
export default withNavigation(NavigationHandler);

这样不管这个组件被放在哪里，都能拿到navigation prop，不会再报undefined的错。

二、使用useNavigation钩子（函数组件适用） #

如果你的项目用的是函数组件，直接用react-navigation的useNavigation钩子更简洁：

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

const NavigationHandler = () => {
  const navigation = useNavigation();

  const navigateToDetail = (item) => {
    navigation.navigate('Detail', { item });
  };

  return (
    <TouchableOpacity onPress={() => navigateToDetail(someItem)}>
      <Text>跳转到详情</Text>
    </TouchableOpacity>
  );
};

export default NavigationHandler;

这个钩子会自动获取当前的导航上下文，不用手动传递prop。

三、手动传递navigation prop给抽离组件 #

如果不想用高阶组件或钩子，最直接的方式就是在父组件（能拿到navigation的页面）调用抽离组件时，把navigation传进去：

比如在你的Category.js里：

// 假设你导入了抽离的NavigationHandler
import NavigationHandler from './NavigationHandler';

class Category extends Component {
  render() {
    return (
      <View>
        {/* 手动传递navigation prop */}
        <NavigationHandler navigation={this.props.navigation} />
        <FlatList
          data={yourData}
          renderItem={({ item }) => (
            <ListItem
              onPress={() => this.props.navigation.navigate('Detail', { item })}
              title={item.name}
            />
          )}
        />
      </View>
    );
  }
}

然后在抽离的组件里直接用this.props.navigation（类组件）或props.navigation（函数组件）即可。

四、封装导航Context（全局复用更灵活） #

如果你的项目很多地方都需要复用导航逻辑，可以把导航实例放到React Context里，全局都能访问：

1. 创建一个NavigationContext.js：

import React, { createContext, useContext } from 'react';
import { useNavigation } from '@react-navigation/native';

const NavigationContext = createContext();

export const NavigationProvider = ({ children }) => {
  const navigation = useNavigation();
  return (
    <NavigationContext.Provider value={navigation}>
      {children}
    </NavigationContext.Provider>
  );
};

export const useAppNavigation = () => {
  return useContext(NavigationContext);
};

2. 在你的导航器外层包裹NavigationProvider：

import { NavigationProvider } from './NavigationContext';

// 假设你的导航器是AppNavigator
const App = () => {
  return (
    <NavigationProvider>
      <AppNavigator />
    </NavigationProvider>
  );
};

3. 在任何组件里使用：

import { useAppNavigation } from './NavigationContext';

const AnyComponent = () => {
  const navigation = useAppNavigation();
  
  const goBack = () => {
    navigation.goBack();
  };
  
  return <Button title="返回" onPress={goBack} />;
};

为什么你之前的方案没生效？ #

大概率是因为你用的react-navigation版本和那个方案不匹配（比如旧版本的API在v5+里已经废弃），或者没有正确给抽离的组件注入导航上下文。上面的方案都是适配v5+版本的，如果你用的是旧版本（v4及以下），可以把@react-navigation/native换成react-navigation，withNavigation的导入路径不变。

最后，检查一下你的Category.js里的组件是否正确嵌套在导航器中，只有导航器直接或间接包裹的组件才能默认拿到navigation prop，抽离的组件如果不在这个层级里，就必须用上面的方法注入。

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