react-native-router-flux升级后出现addListner函数未定义错误求助

刚帮几个开发者解决过类似的升级坑，我来给你捋捋怎么搞定这个错误！

错误核心原因 #

这个报错本质是API大变更：react-native-router-flux从0.27升级到0.30时，彻底切换到了react-navigation的底层架构，原来自家的addListner（注意拼写，新版本标准写法是addListener）事件监听方法被直接移除，改用react-navigation的标准事件系统。你的代码里还在调用旧方法，自然会报“不是函数”的错误。

具体解决方案 #

根据你的组件类型，替换成对应的新写法：

1. 函数组件（推荐方案）

用react-navigation的useNavigation钩子来添加监听：

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

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

  useEffect(() => {
    // 替换成你需要监听的事件，比如页面focus事件
    const unsubscribe = navigation.addListener('focus', () => {
      // 这里写你原来在addListner里的业务逻辑
      console.log('页面已聚焦，执行刷新操作');
    });

    // 组件卸载时务必取消监听，避免内存泄漏
    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      {/* 你的组件UI内容 */}
    </View>
  );
};

2. 类组件方案

使用NavigationEvents组件来监听导航事件：

import { NavigationEvents } from 'react-navigation';
import React from 'react';
import { View } from 'react-native';

class YourScreenComponent extends React.Component {
  handlePageFocus = () => {
    // 原来的addListner逻辑移到这里
    console.log('页面即将聚焦，执行对应操作');
  };

  render() {
    return (
      <>
        <View>
          {/* 你的组件内容 */}
        </View>
        <NavigationEvents
          onWillFocus={this.handlePageFocus}
          // 还可以监听其他标准事件：onDidFocus、onWillBlur、onDidBlur
        />
      </>
    );
  }
}

3. 额外排查点

• 检查依赖兼容性：确保项目中@react-navigation/native、@react-navigation/stack等相关依赖版本和react-native-router-flux 0.30匹配，建议直接安装对应版本的依赖包。
• 清理项目缓存：旧代码缓存可能导致问题残留，运行以下命令重置缓存：

npm start -- --reset-cache
# 若使用yarn则执行：
yarn start --reset-cache

如果你的代码里用了自定义事件（比如自己定义的refresh事件），那得改用Redux、Context或者其他状态管理方案来传递事件触发信号，因为新版本不再支持自定义事件监听了。

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