反应导航版本5，在渲染选项卡屏幕时隐藏顶部栏

Question

我已经使用react-navigation版本5创建了嵌套导航，但是当标签屏幕渲染时，我需要隐藏顶部栏，我已经从https://reactnavigation.org/docs/hiding-tabbar-in-screens/开始执行步骤，但是仍然无法正常工作

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {navigationRef} from './NavigationService';

import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Stack = createStackNavigator();

const homeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  );
};

const MapStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Map" component={Map} />
      <Stack.Screen name="ProviderDetails" component={ProviderDetails} />
    </Stack.Navigator>
  );
};

const Tab = createBottomTabNavigator();

function App(props) {
  const {theme} = props;

  return (
    <NavigationContainer ref={navigationRef} theme={theme}>
      <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            if (route.name === 'Home') {
              return <MaterialIcons name="home" size={size} color={color} />;
            } else if (route.name === 'Map') {
              return (
                <FontAwesome5 name="map-marked-alt" size={size} color={color} />
              );
            } else if (route.name === 'Appointment') {
              return (
                <FontAwesome5 name="calendar-alt" size={size} color={color} />
              );
            } else if (route.name === 'More') {
              return (
                <MaterialIcons name="more-horiz" size={size} color={color} />
              );
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: PRIMARY_COLOR,
          inactiveTintColor: SECONDARY_COLOR,
        }}>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Map" component={MapStack} />
        <Tab.Screen name="Appointment" component={Appointment} />
        <Tab.Screen name="More" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

创建 HomeStack 和 MapStack 堆栈导航器，并将该值传递给 Tab Navigator ， 在下面的图像中，您可以在“主页”和“地图”选项卡显示的顶部栏中看到。

Answer 1

使用headerShown选项

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" options={{ headerShown: false }} component={Home} />
    </Stack.Navigator>
  );
};