React Navigation类组件导航报错：无效Hook调用问题咨询

算力阿峰

2026-8-20

错误原因

这个错误是因为违反了React Hook的核心规则：所有Hook必须在函数组件的顶层作用域调用，不能在事件回调、条件判断、循环或普通函数内部调用useNavigation这类Hook。

可行解决方案

1. 函数组件中正确使用Hook

将useNavigation放在函数组件的顶层，在事件回调中直接使用获取到的navigation对象：

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

const HomeScreen = () => {
  // 必须在组件顶层调用Hook
  const navigation = useNavigation();

  const goToDetail = () => {
    // 在回调中使用navigation跳转
    navigation.navigate('DetailScreen');
  };

  return (
    <Image
      source={require('../assets/your-image.png')}
      onPress={goToDetail}
      style={{ width: 100, height: 100 }}
    />
  );
};

export default HomeScreen;

2. 类组件中使用导航（兼容方案）

如果你的组件是类组件，用withNavigation高阶组件包裹，通过props获取导航对象：

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

class HomeScreen extends React.Component {
  goToDetail = () => {
    this.props.navigation.navigate('DetailScreen');
  };

  render() {
    return (
      <Image
        source={require('../assets/your-image.png')}
        onPress={this.goToDetail}
        style={{ width: 100, height: 100 }}
      />
    );
  }
}

// 用高阶组件包裹后，组件会接收navigation props
export default withNavigation(HomeScreen);