React Native中如何为类组件传递React Navigation的navigation属性以实现页面跳转

没问题，在类组件里使用React Navigation其实和函数组件逻辑一致，只是获取navigation对象的方式稍有不同，这里给你两种可行的方案：

方案一：直接通过this.props获取（推荐） #

React Navigation的Stack.Screen会自动把navigation、route等核心属性作为props传递给它绑定的组件——不管这个组件是函数组件还是类组件。

你只需要把类组件里的navigation替换成this.props.navigation即可，修改后的Page3代码如下：

// imports...
export default class Page3 extends React.Component {
  // ...
  onPress={() => {this.props.navigation.navigate('Page4')}}
  // ...
}

你的App.js已经正确将Page3注册为栈导航的屏幕组件，所以不需要额外配置，直接用这个方法就能正常跳转。

方案二：使用withNavigation高阶组件（适用于嵌套子组件） #

如果你的Page3不是直接作为Stack.Screen的component（比如它是某个屏幕组件的子组件，没有被导航器直接包裹），可以用withNavigation高阶组件给类组件注入navigation属性：

1. 首先安装依赖包（React Navigation 6+版本需要单独安装）：

npm install @react-navigation/compat

2. 修改Page3的代码：

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

class Page3 extends React.Component {
  // ...
  onPress={() => {this.props.navigation.navigate('Page4')}}
  // ...
}

// 用withNavigation包裹组件后导出
export default withNavigation(Page3);

简单总结下：函数组件是直接解构参数里的props，类组件则是通过this.props来访问导航对象，逻辑本质是一样的～

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