React Navigation中headerMode="none"报错问题求助

你当前使用的@react-navigation/stack在新版本中已经废弃了headerMode属性，这就是设置该属性报错的核心原因。以下是两种可行的解决方法：

方案一：通过screenOptions全局隐藏头部 #

直接在screenOptions中配置headerShown: false，替代原有的headerMode="none"来全局隐藏所有页面的导航头部：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';

const Stack = createStackNavigator();

const AppRoutes: React.FC = () => (
    <Stack.Navigator
        screenOptions={{
            cardStyle: { backgroundColor: '#FFF' },
            headerShown: false // 全局隐藏导航头部
        }}
    >
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
        />
        <Stack.Screen
            name="CreateAccount"
            component={CreateAccount}
        />
    </Stack.Navigator>
)

export default AppRoutes;

方案二：改用@react-navigation/native-stack创建路由 #

既然你已安装@react-navigation/native-stack，可以直接使用它构建路由，其API更简洁，头部配置逻辑更直观：

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';

const Stack = createNativeStackNavigator();

const AppRoutes: React.FC = () => (
    <Stack.Navigator
        screenOptions={{
            cardStyle: { backgroundColor: '#FFF' },
            headerShown: false
        }}
    >
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
        />
        <Stack.Screen
            name="CreateAccount"
            component={CreateAccount}
        />
    </Stack.Navigator>
)

export default AppRoutes;

你的依赖安装是完整的，无需额外添加依赖，只需调整路由配置即可解决问题。

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