如何仅在 React Native 的某些屏幕中隐藏父堆栈导航器标题

Posted 2023-02-21

【中文标题】如何仅在 React Native 的某些屏幕中隐藏父堆栈导航器标题

【英文标题】：How to hide a parent Stack Navigator Header only in certain screens in React Native

【发布时间】：2021-12-01 15:10:43

【问题描述】：

根据标题，我想隐藏父堆栈导航器的标题从子组件，这是因为有些屏幕我想保留父标题和一些屏幕我不会。

我知道可以在父 Stack Navigator 中简单地将 header 属性设置为 null，但有什么方法可以在运行时从子组件更改该属性？

这是导航器的层次结构：

ParentStackNavigator
|
|__TabNavigator
   |__Other Screen
   |__MainScreen (Stack Navigator)
      |
      |__ScreenWithHeader
      |__ScreenWithoutHeader
         

挑战是当我在 ScreenWithoutHeader 中时隐藏 ParentStackNavigator 中的标题，而不是在 ScreenWithHeader 中时。我能想到的一种解决方案是用上下文包装整个事情，但我希望有更好的方法。

【参考方案1】：

如果你想在堆栈导航器中隐藏标题，你必须这样做：

<Stack.Navigator screenOptions=headerShown: false>

如果你只想在一个屏幕中隐藏heade，你必须这样做：

<Stack.Screen name=screens.Home component=Home options=headerShown: false />