React Native导航异常：Expo Go隐藏Header，APK构建后Header显示

开发时遇到如下情况：用Expo Go预览应用时，所有页面的Header都能正常隐藏；但通过EAS Build打包成APK安装到真机后，Header却意外显示出来。

相关代码 #

App.js

const Stack = createStackNavigator();
const App = () => {
  const [isReady, setIsReady] = React.useState(false);

  return (
    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator
          screenOptions={{
            headerStyle: {
              display: 'none',
            },
            headerShown: false,
            header: null,
          }}
          initialRouteName={'SignIn'}
        >
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="SignIn"
            component={SignIn}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="ForgotPassword"
            component={ForgotPassword}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="MainLayout"
            component={MainLayout}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
         
        </Stack.Navigator>
      </NavigationContainer>
      <FlashMessage
        style={{
          position: 'absolute',
          top: 0,
          zIndex: 9999
        }}
        position="top" />
    </Provider>
  );
}

export default App

依赖版本 #

"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"expo": "^49.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-i18next": "^12.0.0",
"react-native": "0.72.5",

问题截图 #

• Expo Go中Header已隐藏：
  
• APK安装后Header显示：
  

解决建议 #

1. 简化导航配置，移除冗余设置
   当前全局和每个Screen都重复设置了Header隐藏选项，生产环境下可能触发配置冲突。直接在Stack.Navigator中全局设置headerShown: false即可，无需在每个Screen重复配置：

   <Stack.Navigator
     screenOptions={{ headerShown: false }}
     initialRouteName={'SignIn'}
   >
     // 各Screen组件
   </Stack.Navigator>
   

2. 检查导航版本兼容性
   你使用的@react-navigation/stack 5.x版本与Expo 49（对应RN 0.72.5）存在适配风险。建议升级到导航库6.x版本，该版本与RN 0.72兼容性更好：

   npm install @react-navigation/native@latest @react-navigation/stack@latest
   

   升级后只需调整少量代码适配v6语法，核心的headerShown: false配置逻辑保持一致。

3. 排查嵌套导航影响
   如果MainLayout内部嵌套了其他导航（比如Drawer导航），需要确保内部导航也设置了headerShown: false，避免外层设置被覆盖。

4. 清除EAS缓存重新构建
   执行eas build --clean清除构建缓存后重新打包APK，避免旧配置残留导致的异常。

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