React Native使用NavigationEvents报withNavigation仅可用于导航器层级错误如何解决

问题原因 #

• 你的项目使用的是@react-navigation/native v5/v6 新版本导航库，而你导入的NavigationEvents是 react-navigation 4.x 及更早版本的废弃组件，新旧版本的导航上下文体系不兼容，因此触发了找不到navigation上下文的报错。
• 新版本已移除NavigationEvents组件，统一通过导航事件监听API实现页面聚焦/失焦的逻辑触发。

解决步骤 #

1. 移除旧组件导入 #

删除Location.js文件中的import {NavigationEvents} from 'react-navigation';导入语句，同时删除render方法中的<NavigationEvents />组件代码。

2. 使用新版本导航监听API实现逻辑 #

修改后的Location.js完整代码如下：

import React, { Component } from 'react';
import { View } from 'react-native';

export default class Location extends Component {
  componentDidMount() {
    // 注册页面聚焦事件监听
    this.focusListener = this.props.navigation.addListener('focus', () => {
      this.onRenderHandler();
    });
  }

  componentWillUnmount() {
    // 页面销毁时移除监听，避免内存泄漏
    this.focusListener?.();
  }

  onRenderHandler = () => {
    // 此处填写你需要在页面回到前台时执行的逻辑
  }

  render () {
    return (
      <View>
        {/* 原有页面渲染内容 */}
      </View>
    );
  }
}

额外修正说明 #

你原有代码中调用onRenderHandler时没有加this，类组件内调用自身挂载的方法必须通过this.方法名的形式调用，否则会抛出变量未定义的错误。

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