React Navigation 6：从子导航器内的屏幕覆盖父导航器的标题配置

Question

我有一个 BottomTab 导航器嵌套在 Stsck 导航器中。并且header是通过StackscreenOptions配置的：

function AppStackNavigator() {
  return (
      <Stack.Navigator screenOptions={getScreenOptions}>
        <Stack.Screen name="BottomTab" component={BottomTabNavigator}/>
        ...
      </Stack.Navigator>
  )

  const getScreenOptions = ({route, navigation}) => {
    // crazy logic ... 
    return {
      headerLeft: getHeaderLeft,
      headerRight: getHeaderRight,
      ...
    }
  }

}

在BottomTaB 导航器中，我有一个名为Target 的屏幕。请注意，headerShown 在此处设置为 false。

function BottomTabNavigators() {
  return (
      <Tab.Navigator
          screenOptions={{headerShown: false}}
          tabBar={props => <MyTabBar {...props}/>}
      >
        <Tab.Screen name="Target" component={TargetScreen}/>
      </Tab.Navigator>
  )
}

在目标屏幕中，我将覆盖 PARENT 导航器的 headerRight，因为我需要标题和只能在此屏幕内访问的方法 (methodThatIsOnlyAccessableHere) 之间的直接交互：

function TargetScreen() {

  const  methodThatIsOnlyAccessableHere = () => { ... }

  useLayoutEffect(() => {
    const getHeaderRight = () => {
    // call methodThatIsOnlyAccessableHere
    ...
    }

    const parentNavigator = navigation.getParent()
    parentNavigator.setOptions({
      headerRight: getHeaderRight,
    })

  }, [navigation])
}

当前行为：

顶级标题配置（堆栈导航器中的screenOptions）运行良好。当导航到Target 屏幕时，覆盖的标题配置（使用setOptions ）将变为活动状态。 然而，当离开这个屏幕时，这个被覆盖的配置仍然保持活动状态（不受欢迎的行为）

期望的行为

当离开Target 屏幕时，顶级标题配置应该变为活动状态，而被覆盖的配置应该无效。

为什么这是我的设计选择？

我总是隐藏嵌套的导航器标题（BottomTab 导航器的标题）并根据子导航器的状态配置顶级（父）导航器标题（Stack navigator）。我无法将Target 屏幕的标题配置移动到父级，因为在这种情况下我将无法访问methodThatIsOnlyAccessableHere。

Answer 1

我假设您的 TargetScreen 函数针对每个路由调用运行，以尽可能覆盖父元素。 如果为真，您可以在 useLayoutEffect 钩子开始时重置选项，并且再次假设您的 getParent() 调用检查您正在访问的页面类型，只要调用效果，它就会重置当前页面导航而不影响其覆盖打电话。

Answer 2

您需要再次更新headerRight。例如：使用 useLayoutEffect 钩子的清理。

  useLayoutEffect(() => {
    const getHeaderRight = () => {
    // call methodThatIsOnlyAccessableHere
    ...
    }

    const parentNavigator = navigation.getParent()
    parentNavigator.setOptions({
      headerRight: getHeaderRight,
    })

    // cleanup
    return () => {
      parentNavigator.setOptions({
        headerRight: null
      })
    }

  }, [navigation])