react-native - 删除标题 react 导航 v5

Question

我似乎无法在新版本的 React Navigation 中将 header 配置为 null。我可以使用 headerTransparent 选项将其设置为透明，但这看起来标题仍然存在，因为屏幕仍然需要一个名称。

Here is what I had initially, using the template that comes with a new Expo application

And this is what it looks like with the header as transparent .这基本上是我想看到的，但标题仍然被强加在那里。

我不想要带有导航的标题，但这看起来像是默认行为。我尝试查看文档以查看是否有删除标题的 Prop ，但遇到了 404 页面选项:https://reactnavigation.org/docs/en/navigation-options.html

我是 React Native 的新手，所以可能有一些误解。但是文档对此不清楚，我找不到直接解决此问题的计算器溢出问题。

这是我的 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'
  }
}

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>

您需要通过 屏幕选项 进入 Stack.Navigator 并制作 headerShown:false

假设您只想在特定屏幕上禁用标题，那么此示例将帮助您

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

希望你对此有清楚的了解:)