React Navigation的StackNavigator配置screenOptions出现TS类型报错如何解决？

你为screenOptions入参标注的NavigatorProps类型，强制限定了route只能是DashboardIndex单路由的RouteProp类型，但导航器层级的全局screenOptions会被应用到该导航器下所有注册的路由，React Navigation给它预设的入参route类型是所有路由的联合类型RouteProp<ScopeNavParamList, keyof ScopeNavParamList>，二者类型不匹配触发了重载报错。

两种修改方式任选即可：

方式1：手动标注兼容所有路由的入参类型 #

把原来限定单路由的参数类型替换为所有路由的联合类型：

import type { StackScreenProps, StackNavigationProp } from '@react-navigation/stack';

type ScopeNavParamList = {
    DashboardIndex: { title: string };
    HashesIndex: { title: string };
    NewHashes: { title: string };
    AccountIndex: { title: string };
};

// 定义兼容所有路由的screenOptions入参类型
type ScreenOptionsProps = {
  route: StackScreenProps<ScopeNavParamList, keyof ScopeNavParamList>['route'];
  navigation: StackNavigationProp<ScopeNavParamList, keyof ScopeNavParamList>;
};

const ScopeNavigator = createStackNavigator<ScopeNavParamList>();
const screenOptions = ({navigation, route }: ScreenOptionsProps) : StackNavigationOptions => {
    // 原有配置逻辑保持不变
    return {
        headerStyle: {
            backgroundColor: Colors.background,
            elevation: 0,
        },
        headerTitleAlign: "center",
        headerTitleStyle: {
            fontFamily: Typography.poppinsMedium,
            color: Colors.primaryDarker,
            fontSize: 22
    
        },
        cardStyle: {
            backgroundColor: Colors.background
        },
    }    
}

export function DashboardNav() {
    return (
        <ScopeNavigator.Navigator initialRouteName="DashboardIndex" screenOptions={screenOptions} >
            <ScopeNavigator.Screen name="DashboardIndex" component={Dashboard} />
        </ScopeNavigator.Navigator>
    );
}

方式2：使用导航器自带类型自动推导 #

不需要手动写联合类型，直接复用导航器实例的类型，更简洁不易出错：

const ScopeNavigator = createStackNavigator<ScopeNavParamList>();
// 直接用ScopeNavigator自带的screenOptions类型，参数会自动推导正确类型
const screenOptions: typeof ScopeNavigator['screenOptions'] = ({navigation, route}) => {
    // 原有配置逻辑保持不变
    return {
        headerStyle: {
            backgroundColor: Colors.background,
            elevation: 0,
        },
        headerTitleAlign: "center",
        headerTitleStyle: {
            fontFamily: Typography.poppinsMedium,
            color: Colors.primaryDarker,
            fontSize: 22
    
        },
        cardStyle: {
            backgroundColor: Colors.background
        },
    }    
}

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