React Native新手求助：如何移除Expo项目中各页面顶部的标题？

Hey there! Let's fix that unwanted header showing up at the top of your screens. The issue here is that React Navigation's Bottom Tab Navigator automatically adds a header to each screen by default—even if your individual screen components (like Explore.js) don't include any header code.

Here's the simple fix you can apply in your App.js file:

Step 1: Update the Tab Navigator's Screen Options #

Add the screenOptions={{ headerShown: false }} prop to your Tab.Navigator component. This will globally disable the header for all screens in your bottom tab navigator.

Updated App.js Code #

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
import Explore from './screens/Explore';
import Saved from './screens/Saved';
import Trips from './screens/Trips';
import Inbox from './screens/Inbox';

const Tab = createBottomTabNavigator();

export default function BottomTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        // Add this line to hide all default headers
        screenOptions={{ headerShown: false }}
        // Keep your existing tab bar customization here (if any)
        // Example: tabBarActiveTintColor: '#2E7D32'
      >
        <Tab.Screen name="Explore" component={Explore} />
        <Tab.Screen name="Saved" component={Saved} />
        <Tab.Screen name="Trips" component={Trips} />
        <Tab.Screen name="Inbox" component={Inbox} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Why This Works #

The headerShown: false option tells React Navigation not to render its default header component for any of the screens in the tab navigator. If you ever need to re-enable the header for a specific screen later, you can override the global setting by adding options={{ headerShown: true }} to that individual Tab.Screen component.

Since your Explore.js component doesn't include any custom header code of its own, making this change in App.js will get rid of those automatic page titles entirely.

内容的提问来源于stack exchange，提问作者ZamZam