如何去掉索引标题？

Question

我似乎不知道如何删除页面顶部的索引。我尝试过使用

headerShown = {false}

但它不起作用。下面是我的代码

// index.tsx

import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler'; // Import GestureHandlerRootView
import AppNavigator from './(tabs)/_layouts'; // or './layouts'

export default function InitialRouting() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AppNavigator />
    </GestureHandlerRootView>
  );
}

// _layouts.tsx

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from '../firebaseConfig';
import HomeStack from '../stacks/homeStack';
import ProfileStack from '../stacks/profileStack';
import GiveStack from '../stacks/giveStack';
import DiscoverStack from '../stacks/discoverStack';
import SignUpPage from '../signUpPage';
import LoginPage from '../loginPage';
import AuthenticationPage from '../authenticationPage';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function TabLayout() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = 'home';
          } else if (route.name === 'Discover') {
            iconName = 'search';
          } else if (route.name === 'Profile') {
            iconName = 'person';
          } else if (route.name === 'Give') {
            iconName = 'heart';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Discover" component={DiscoverStack} />
      <Tab.Screen name="Give" component={GiveStack} />
      <Tab.Screen name="Profile" component={ProfileStack} />
    </Tab.Navigator>
  );
}

export default function AppNavigator() {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const subscriber = onAuthStateChanged(auth, (user) => {
      setUser(user);
      if (initializing) setInitializing(false);
    });
    return subscriber; // Unsubscribe on unmount
  }, []);

  if (initializing) return null;

  return (
    <NavigationContainer independent = {true}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {user ? (
          <Stack.Screen name="Main" component={TabLayout} />
        ) : (
          <>
            <Stack.Screen name="AuthenticationPage" component={AuthenticationPage} />
            <Stack.Screen name="SignUp" component={SignUpPage} />
            <Stack.Screen name="Login" component={LoginPage} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我尝试使用 headerShown={false} 并在两段代码之间移动导航容器，但都不起作用

Answer 1

索引标题可能源自组件名称或文件结构更新屏幕选项以更改名称，例如：

<Tab.Screen 
    name="Home" 
    component={HomeStack} 
    options={{ title: 'Home' }}  // Custom title
/>


<Tab.Screen 
    name="Home" 
    component={HomeStack} 
    options={{ headerShown: false }} // No title for Home
 />