Блог

Когда я пытаюсь добавить навигацию по нижней вкладке, то у меня только что появилась вкладка «стек» над компонентами поиска, можете ли вы помочь мне скрыть или стереть ее?

Вот мой код, и он выглядит так.

     const Tab = createBottomTabNavigator();
    
    const Settings = () => (
      <SafeArea>
        <Text>Settings</Text>
      </SafeArea>
    );
    const Maps = () => (
      <SafeArea>
        <Text>Maps G</Text>
      </SafeArea>
    );
    
    import {
      useFonts as useOswald,
      Oswald_400Regular,
    } from "@expo-google-fonts/oswald";
    import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";
    
    export default function App() {
      const [oswaldLoaded] = useOswald({
        Oswald_400Regular,
      });
    
      const [latoLoaded] = useLato({
        Lato_400Regular,
      });
    
      if (!oswaldLoaded || !latoLoaded) {
        return null;
      }
    
      return (
        <>
          <ThemeProvider theme={theme}>
            <NavigationContainer>
              <Tab.Navigator>
                <Tab.Screen name="Restaurant" component={RestaurantScreen} />
                <Tab.Screen name="Maps" component={Maps} />
                <Tab.Screen name="Settings" component={Settings} />
              </Tab.Navigator>
            </NavigationContainer>
          </ThemeProvider>
          <ExpoStatusBar style={"auto"} />
        </>
      );
    }

 

Вот мое изображение для навигации по нижней вкладке ->
появляться

У вас есть заголовок на экране как часть BottomTabNavigation. добавление опции экрана, как показано ниже, решит эту проблему

       <Tab.Navigator screenOptions={{headerShown: false}} >
        <Tab.Screen name="Restaurant" component={RestaurantScreen} />
        <Tab.Screen name="Maps" component={Maps} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
 

Вы можете скрыть заголовок с headerShown: false помощью для одного маршрута

 <Stack.Navigator
  initialRouteName="Settings"
  screenOptions={{
    headerShown: false, // hide header 
 }}>
 

Взгляните на мой образец

Или для навигатора вкладок с:

   <Tab.Navigator
    initialRouteName="Feed"
    tabBarOptions={{
      headerShown: false,    
    }}>