如何隐藏屏幕标题但显示后退按钮？

Posted 2023-02-19

【中文标题】如何隐藏屏幕标题但显示后退按钮？

【英文标题】：How can I hide the screen header but show my back button?

【发布时间】：2021-10-07 13:39:44

【问题描述】：

我想隐藏我的屏幕标题，但仍然在 Stack Navigator 中显示返回按钮？我在我的 Stack.Navigator 中设置了 screenOptions= headerShown: false ，它隐藏了屏幕标题和后退按钮。我只想隐藏屏幕标题。

有人可以帮忙吗？下面是我的堆栈导航器：

function SearchStack() 
   return (
     <Stack.Navigator screenOptions= headerShown: false >
        <Stack.Screen name="SearchScreen" component=SearchScreen />
        <Stack.Screen name="SearchListScreen" component=SearchListScreen />

     </Stack.Navigator>
   );

在选项卡导航器中，堆栈设置为：

   <Tab.Navigator screenOptions=( route ) => (
      tabBarIcon: ( focused, color, size ) => ...)> 
    <Tab.Screen name="Search" component=SearchStack />
   </Tab.Navigator>  

这是我目前看到的：

但这就是我想要的，我的标签导航栏仍然在搜索堆栈的底部：

这是我在 Stack.Navigator 中使用 options=headerMode:"none" 得到的结果：

将 Stack.Navigator 添加更新到 时会发生以下情况。如何像第二张图片一样添加或移动后退按钮到顶部，这是在不将堆栈添加到 Tab.Screen 时实现的，因此更改：

到

但这样做会导致选项卡不出现在搜索列表屏幕中。

【问题讨论】：

您还必须在 tab.navigator 中添加这一行 screenOptions= headerShown: false

谢谢。实际上，在我的 Tab.Navigator 中，我在 screenOptions 中有一些内容，如上所示。我在哪里可以在我的 screenOptions 中添加它？谢谢。

您好，刚才我在我的代码中注意到，我认为您需要像这样添加 您不需要更改。我只是将 Tab.Navigator 放在 Stack.Navigator 内以进行身份​​验证

谢谢，但这似乎不起作用。它的行为类似于 screenOptions= headerShown: false 。后退按钮未显示。

Doing this options=headerMode:"none" in stack navigator 给了我上面的，我不想要的。

【参考方案1】：

后退按钮是表头的一部分，所以不能隐藏表头而保留后退按钮。

你想要做的是隐藏标题的其他部分，除了后退按钮，这将是

标题，带有headerTitle: "" 背景，带有headerTransparent: true

【讨论】：

谢谢。我应该在哪里添加这个？像这样将它添加到 Stack.Navigator 中 会导致上图。

有栈头和屏幕头吗？因为看图像，看起来有 2 个标题。 1 个用于堆栈（可能），另一个用于屏幕。

@AJDee 很好，这是意料之中的，标题仍然存在，但它是透明的，所以你的内容在它下面。您需要为内容添加顶部填充，以免重叠。您可以使用 useHeaderHeight 并添加填充 reactnavigation.org/docs/elements#useheaderheight

【参考方案2】：

如果您不想要默认标题，请像这样使用

screenOptions= headerShown: false

并在组件中为带有后退按钮的标题编写自定义代码 （如果你使用的是类组件）那么

<TouchableOpacity onPress=()=>this.props.navigation.goBack() style=width:'100%', height:45, flexDirection:'row'> <Image source=require('back button image path')/> </TouchableOpacity>

如果你也想要标题标题，那么，

<TouchableOpacity onPress=()=>this.props.navigation.goBack() style=width:'100%', height:45, flexDirection:'row'> <Image source=require('back button image path')/> <Text>SearchListScren</Text> </TouchableOpacity>

将此代码放在容器下的组件代码顶部