navigation.addListener绑定focus事件打印不生效且useEffect报错

根因分析 #

你收到的警告核心是React要求useEffect的返回值只能是清理函数或undefined，你当前返回了对象，本质原因是React Navigation版本差异导致的返回值规则不同：

• 4.x及更早版本：navigation.addListener直接返回可直接调用的清理函数
• 5.x及后续所有版本：navigation.addListener返回的是带remove方法的对象，不能直接作为清理函数返回
  这一差异同时导致事件绑定逻辑异常，所以回调内的console.log没有触发。

你收到的警告原文：
Warning: An effect function must not return anything besides a function, which is used for clean-up. You returned: [object Object];

修复代码 #

将useEffect的返回值改为调用listener的remove方法的匿名函数即可：

useEffect(() => {
  const unsubscribeListener = navigation.addListener('focus', () => {
    console.log('Testeeee');
  });
  // 返回符合React要求的清理函数
  return () => unsubscribeListener.remove();
}, [navigation]);

可选排查项 #

如果修改后回调还是不触发，可以检查两点：

• 确认当前组件是导航注册的路由页面，确实能拿到合法的navigation实例
• 确认事件名称拼写正确，无大小写、拼写错误

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