如何在React类组件中使用React Navigation的useNavigation Hook

useNavigation 是仅支持函数组件/自定义Hook的React Hook，无法直接在类组件中调用，你可以通过以下两种方式在类组件中获得导航能力：

方案1：使用 withNavigation 高阶组件包裹 #

React Navigation v5及以上版本将该高阶组件移到了兼容包@react-navigation/compat中，v4及更早版本可以直接从react-navigation导入。
使用示例：

1. （v5+版本）先安装兼容依赖
   npm install @react-navigation/compat
2. 组件代码：

import React, { Component } from 'react';
import { Button, View } from 'react-native';
// v5+ 导入路径
import { withNavigation } from '@react-navigation/compat';
// v4及更早版本使用 import { withNavigation } from 'react-navigation';

class DemoClassComponent extends Component {
  render() {
    // 包裹后navigation对象会自动注入到组件props中
    const { navigation } = this.props;
    return (
      <View>
        <Button
          title="跳转到目标页面"
          onPress={() => navigation.navigate('TargetPage')}
        />
      </View>
    )
  }
}

// 导出时用高阶组件包裹
export default withNavigation(DemoClassComponent);

方案2：从父级函数组件传递navigation属性 #

如果你的类组件是某个函数组件的子组件，可以直接在父组件拿到navigation对象后作为props传入类组件：

// 父级函数组件
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import DemoClassComponent from './DemoClassComponent';

const ParentComponent = () => {
  const navigation = useNavigation();
  // 将navigation作为属性传递给子类组件
  return <DemoClassComponent navigation={navigation} />
}

export default ParentComponent;

注意事项 #

• React Navigation v6及以上版本官方优先推荐将类组件重构为函数组件使用Hook，@react-navigation/compat兼容包仅做能力兼容，不再新增功能维护。
• 类组件中拿到navigation对象后，跳转、传参、监听导航生命周期等用法和函数组件完全一致。

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