从反应导航中删除标题答案

【问题标题】：Remove header title from react-navigation从反应导航中删除标题
【发布时间】：2021-08-07 16:06:33
【问题描述】：

我正在使用react-navigation 版本 6，并且想知道如何从标题中删除该标题，默认情况下，它已经显示了我们通过的页面的名称。

在第 5 版中，传递给 headerMode 这已被删除，但在这个新版本中，我没有找到如何删除它。

我的代码：

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import { Home } from '../screens/Home';
import { Search } from '../screens/Search';

const { Navigator, Screen } = createStackNavigator();

export function AppStackRoutes() {
  return (
    <Navigator initialRouteName="Search">
      <Screen 
        name="Search" 
        component={Search} 
      />
      <Screen 
        name="Home" 
        component={Home} 
      />
    </Navigator>
  )
}

【问题讨论】：

标签： typescript react-navigation react-native-navigation

【解决方案1】：

使用headerShown 隐藏或显示标题栏。

阅读this migration guide 和文档：

以前，您可以通过 headerMode="none" 属性将标题隐藏在堆栈导航器中。但是，还有一个 headerShown 选项，可以用来隐藏或显示标题，它支持按屏幕配置。

<Navigator 
    initialRouteName="Search" 
    screenOptions={{ headerShown: false }}
>
    <Screen 
        name="Search" 
        component={Search} 
    />
    <Screen 
        name="Home" 
        component={Home} 
    />
</Navigator>

【讨论】：