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

【问题标题】：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 给了我上面的，我不想要的。

标签： react-native react-navigation react-navigation-stack

【解决方案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>

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

【讨论】：