从 react-navigation 中删除 header 标题

Question

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

在版本 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>
  )
}

Answer 1

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

阅读 this migration guide 和文档：

Previously, you could pass headerMode="none" prop to hide the header in a stack navigator. However, there is also a headerShown option which can be used to hide or show the header, and it supports configuration per screen.

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

从 react-navigation 中删除 header 标题

Remove header title from react-navigation

typescript

react-navigation

react-native-navigation