Expo开发React Native应用遇双Header问题，求解决方法

你的双头部问题根源在于expo-router的<Stack>组件默认会为所有路由页面添加一个头部，而你集成的Bottom Tab Navigator也带有头部（或页面自身包含头部），导致两个头部叠加显示。

解决步骤 #

直接在_layout.js的<Stack>组件中全局隐藏默认头部即可：

修改_layout.js中的Stack配置，添加screenOptions={{ headerShown: false }}：

import { useCallback } from 'react';
import { Stack } from "expo-router";
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const Layout = () => {
    const [fontsLoaded, fontError] = useFonts({
        DMBold: require('../assets/fonts/DMSans-Bold.ttf'),
        DMMedium: require('../assets/fonts/DMSans-Medium.ttf'),
        DMRegular: require('../assets/fonts/DMSans-Regular.ttf'),
    });

    const onLayoutRootView = useCallback(async () => {
        if (fontsLoaded || fontError) {
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded, fontError]);

    if (!fontsLoaded && !fontError) {
        return null;
    }

    // 添加screenOptions隐藏默认Stack头部
    return <Stack 
        onLayout={onLayoutRootView}
        screenOptions={{ headerShown: false }} 
    />;
}

export default Layout;

补充说明 #

如果之后需要在特定页面单独显示头部，可以在对应页面的路由配置中单独设置headerShown: true，或者在Tab Navigator的Tab.Screen中自定义头部：

<Tab.Screen 
    name="Feed" 
    component={FeedScreen}
    options={{ headerTitle: '首页' }} // 自定义Tab页面的头部
/>

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