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

Question

我想隐藏屏幕标题，但仍然在堆栈导航器中显示后退按钮？我在 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 更新添加到 <Stack.Navigator screenOptions={{ headerTitle:"", headerTransparent:true }}> 时，会发生以下情况。如何将后退按钮添加或移动到顶部，就像第二张图片一样，这是在不将堆栈添加到 Tab.Screen 时实现的，因此进行更改：

<Tab.Screen name="Search" component={SearchStack} />

到

<Tab.Screen name="Search" component={SearchScreen} />

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

Answer 1

后退按钮是标题的一部分，因此您无法隐藏标题并保留后退按钮。

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

• 标题，与headerTitle: ""
• 背景，与headerTransparent: true