移除 React Navigation v5 的标题栏

Question

我似乎无法在新版本的React Navigation中将标题配置为null。我可以使用headerTransparent选项将其设置为透明，但是它看起来像标题仍然存在，因为屏幕仍需要一个名称。 这是我最初的样子，使用一个新的Expo应用程序模板 而这就是标题透明时的效果，基本上就是我想看到的，但还是会强制显示标题。

我不想要导航栏，但这似乎是默认行为。我尝试查看文档，看是否有类似的属性可删除标题，但在选项页面遇到了404页面： https://reactnavigation.org/docs/zh-Hans/navigation-options.html 我对React Native很陌生，所以可能有些误解。但是文档对此不够清晰，我也找不到一个直接回答此问题的stackoverflow问题。

这是我的App.js：

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

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator>
    <Stack.Screen name="root" component={BottomTabNavigator} options={{headerTransparent: true}}/>
  </Stack.Navigator>
</NavigationContainer>

这是我的BottomTabNavigator.js代码，非常类似于Expo提供的模板代码。

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/Home';
import SearchScreen from '../screens/Search';

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'Home';

export default function BottomTabNavigator({ navigation, route }) {
  navigation.setOptions({ headerTitle: getHeaderTitle(route) });
  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" />
        }}
      />
      <BottomTab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          title: 'Search',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
        }}
      />
    </BottomTab.Navigator>
  );
}

function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
      return 'How to get started';
    case 'Appointments':
      return 'Your appointments';
    case 'Search':
      return 'Search for services';
    case 'Account':
      return 'Account'
  }
}

- arthurk33

---

尝试使用这个，希望能对你有所帮助...... - meowww

这个回答解决了你的问题吗？如何在一个屏幕上隐藏React Navigation标题栏 - Auticcat

我想在整个应用程序中禁用它。所选答案提供了两种方法，可以逐个禁用或整体禁用。 - arthurk33

Answer 1

在您的情况下，您有两个选择。您可以禁用所有屏幕的标题，也可以仅禁用所选屏幕的标题。

要禁用应用程序中的全局标题，请像这样编辑您的app.js。

App.js

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

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator screenOptions={{headerShown: false,}}>
    <Stack.Screen name="root" component={BottomTabNavigator}/>
  </Stack.Navigator>
</NavigationContainer>

你需要将screenOptions传递给Stack.Navigator，并将headerShown:false。假设您只想在特定屏幕上禁用标题，则此示例将对您有所帮助。

<Stack.Navigator ...>
 ...
  <Stack.Screen
    name="Landing"
    component={LandingScreen}
    options={{
      headerShown: false, // change this to `false`
    }}
  />
...
</Stack.Navigator>

希望你对此有清晰的理解：）

- Akila Devinda

---

@arthurk33 很高兴能帮助你。 - Akila Devinda

Answer 2

在一个屏幕上删除：

      <Stack.Screen
              name="SignIn"
              component={SignInScreen}
              options={{
                headerShown: false,
              }}
            />

从所有堆栈中删除：

     <Stack.Navigator
        screenOptions={{
         headerShown: false
        }}
        >

- Caro Pérez

Answer 3

将headerMode: none设置为默认属性将从任何屏幕中删除标题。

const Stack = createStackNavigator();
Stack.Navigator.defaultProps = {
    headerMode: 'none',
};

此外，我认为你可以将screenOptions的headerShown属性设置为false作为默认属性，但这将会在每个屏幕上隐藏标题栏，而不是只隐藏一次。

- AlexanderD

Answer 4

在 React Navigation V5 中，要添加 options={{ title: "注册", animationEnabled: false, headerShown: false }}。

  <AuthStack.Screen
  name="SignupScreen"
  component={SignupScreen}
  options={{ title: "Sign Up", animationEnabled: false, headerShown: false }}
/>

- Menon Hasan