React Navigation 6 子导航器页面覆盖父header后离开无法恢复怎么解决

解决方案 #

你可以利用 useLayoutEffect 的清理函数，在Target页面离开/卸载时自动恢复父导航器的原有header配置，修改后的代码如下：

function TargetScreen() {
  const methodThatIsOnlyAccessableHere = () => {
    // 页面独有逻辑实现
  }

  useLayoutEffect(() => {
    const parentNavigator = navigation.getParent()
    // 先缓存父导航器当前生效的原始headerRight配置
    const originalHeaderRight = parentNavigator.getOptions().headerRight

    const getCustomHeaderRight = () => {
      // 调用页面内独有方法
      methodThatIsOnlyAccessableHere()
      // 渲染自定义headerRight的原有逻辑
    }

    // 覆盖父导航的header配置
    parentNavigator.setOptions({
      headerRight: getCustomHeaderRight,
    })

    // 清理函数：页面离开时自动执行，恢复原始配置
    return () => {
      parentNavigator.setOptions({
        headerRight: originalHeaderRight,
      })
    }
  // 补全依赖项，避免闭包导致的方法调用异常
  }, [navigation, methodThatIsOnlyAccessableHere])
}

补充说明 #

• 如果你全局的headerRight配置是固定导出的方法，也可以直接在清理函数中将headerRight设置为全局的默认方法，不需要额外缓存。
• 该方案兼容Tab切换、页面返回等所有离开Target页面的场景，不需要额外监听路由事件。

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