React Native新版本如何隐藏Header？headerMode='none'无效怎么办

@react-navigation/native-stack（原生实现的栈导航）从v6版本开始就移除了headerMode配置项，这个属性仅在旧版JS实现的@react-navigation/stack中生效，直接在Stack.Navigator上配置headerMode='none'属于无效属性，自然不会生效。

native-stack 控制导航栏显示/隐藏的统一配置字段是headerShown，值为false时即可隐藏对应页面的顶部Header，根据需求可以选择两种配置方式：

• 全局隐藏栈下所有页面的Header：在Stack.Navigator的screenOptions中统一配置
• 仅隐藏Onboarding引导页的Header：给对应Stack.Screen单独配置options（适配当前只需要隐藏引导页头部的场景）

修正后的代码（仅隐藏引导页Header） #

import  React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './Screen/LoginScreen';
import OnboardingScreen from './Screen/OnboardingScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 给引导页单独配置隐藏Header */}
        <Stack.Screen 
          name="Welcome" 
          component={OnboardingScreen} 
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

如果需要全局隐藏所有页面Header #

直接给Stack.Navigator加screenOptions配置即可：

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="Welcome" component={OnboardingScreen} />
  <Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>

不要直接照搬@react-navigation/stack（JS栈）的配置项到native-stack中，两者底层实现不同，支持的配置属性存在差异，native-stack所有头部相关的配置都通过screenOptions或页面单独的options传入。

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