React Native 如何在组件中监听 Tab 切换以感知用户离开当前屏幕

现有写法不生效的原因 #

你当前绑定navigation依赖的useEffect清理函数没有触发，本质是Tab导航的默认运行机制导致的：

• Tab导航默认会对已经访问过的Tab组件做内存驻留处理，切走Tab时不会触发组件卸载流程，自然不会执行useEffect的清理逻辑
• 由导航容器注入的navigation对象是稳定引用，只要导航容器没有被销毁，这个引用就不会发生变化，不会触发副作用的重新执行

组件内可直接落地的监听方案 #

基于导航内置事件监听实现（官方推荐） #

不需要依赖组件卸载时机，直接通过navigation对象提供的监听能力，就能精准捕捉屏幕的聚焦/失焦状态，对应Tab切换、页面跳转的时机：

• 绑定blur事件：当前屏幕失去焦点时触发，对应用户切走当前Tab、从当前页跳转到其他页面的时机
• 绑定focus事件：当前屏幕获得焦点时触发，对应用户切回当前Tab、从其他页面返回当前页的时机
• 参考实现代码：

useEffect(() => {
  // 绑定失焦监听
  const offBlur = navigation.addListener('blur', () => {
    console.log('已离开当前Tab对应的屏幕')
    // 可在此写入离开时的逻辑：如暂停音视频、停止接口轮询、清理临时状态等
  })

  // 绑定聚焦监听
  const offFocus = navigation.addListener('focus', () => {
    console.log('已切回当前Tab对应的屏幕')
    // 可在此写入回屏逻辑：如恢复音视频播放、刷新页面数据等
  })

  // 组件真正卸载时解绑所有监听，避免内存泄漏
  return () => {
    offBlur()
    offFocus()
  }
}, [navigation])

专属Tab切换事件监听（仅捕捉Tab栏点击行为） #

如果只需要捕捉用户点击Tab栏、切换不同Tab的行为，不需要区分“跳转子页面导致的失焦”和“切Tab导致的失焦”，可以直接绑定Tab导航专属的tabPress事件，还能获取到用户点击的目标Tab路由信息：

useEffect(() => {
  const offTabPress = navigation.addListener('tabPress', (event) => {
    console.log('用户点击了Tab栏，即将触发Tab切换，目标路由：', event.target)
  })
  return () => offTabPress()
}, [navigation])

常见认知提醒 #

• 不要将“组件卸载”和“切走Tab”的逻辑等价：Tab组件驻留的设计本身是为了保留Tab内的用户操作状态，减少重复渲染的性能损耗，没有特殊需求不需要修改这个默认行为
• 不要通过路由参数变化判断Tab切换：大部分Tab页面本身没有路由参数变更，这种判断方式会漏触发绝大多数Tab切换场景

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