React Native TypeScript中使用cardStyleInterpolators报类型匹配错误

在TypeScript环境下使用React Navigation v6开发React Native项目时，尝试通过cardStyleInterpolators和transitionSpec属性实现页面切换动画，但在Stack.Navigator的screenOptions或Stack.Screen的options中配置这两个属性时，触发了「No overload matches this call error」类型匹配错误，其余属性均可正常工作。

相关代码 #

import React from "react";
import { Image } from "react-native";
import { useSelector } from "react-redux";
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
  NativeStackNavigationOptions,
  NativeStackNavigationEventMap,
} from "@react-navigation/native-stack";
import {
  NavigationContainer,
  RouteProp,
  RouteConfig,
  StackNavigationState,
} from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { navigationRef } from "./RootNavigation";
import Route from "./route";
import MainScreen from "src/screen/main-screen";
import Profile from "src/screen/Profile";


type RootStackParamList = {
  [Route.welcome]: undefined;
  [Route.phoneLogin]: {
    isOrderScreen?: boolean;
  };
  [Route.mainScreen]: {
    fromHome?: any;
  };
  [Route.filterSearch]: undefined;
  [Route.searchResult1]: undefined;
  [Route.productPage]: {
    productData?: SearchProductItemI;
  };
  [Route.fleetPayment]: undefined;
  [Route.trackorder]: undefined;
  [Route.mycart]: undefined;
  [Route.picklocation]: undefined;
  [Route.otpVerify]: {
    phoneNumber?: string | undefined;
    isOrderScreen?: boolean;
    deliveryFleet?: string | undefined | boolean;
    userId?: string | undefined;
    roleId?: string | undefined;
    staticOtp?: any;
  };
  [Route.searchproduct]: {
    searchname?: any;
    isSearch?: boolean;
    storeCategoryName?: any;
  };

  [Route.ordersummary]: {
    orderId?: string;
  };
  [Route.fleetsummary]: undefined;
  [Route.producttracking]: undefined;

  [Route.newTrackOrder]: any;

  [Route.drawerorder]: undefined;
  [Route.drawermylocation]: undefined;
  [Route.drawerdeliveryfleets]: undefined;
  [Route.profile]: undefined;
  [Route.trackrider]: undefined;
  [Route.orderformerchant]: undefined;
  [Route.orderformerchanttwo]: undefined;
  [Route.orderPayment]: any;
  [Route.myorderdetails]: any;
  [Route.storepage]: any;
  [Route.storeBasedOnCategory]: any;
  [Route.seeAllScreen]: any;
  [Route.paymentTip]: any;
  [Route.notification]: any;
  [Route.addressform]: any;
  [Route.fleetform]: any;
  [Route.googlesearch]: any;
  [Route.welcomescreen]: any;
  [Route.locationfetch]: any;
  [Route.productBottomPage]: any;
  [Route.subcategoryscreen]: any;
  // [Route.home]: undefined;
};

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootRouteProps<RouteName extends keyof RootStackParamList> =
  RouteProp<RootStackParamList, RouteName>;

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

const Stack = createNativeStackNavigator<RootStackParamList>();
const Drawer = createDrawerNavigator();

function CommonStacks() {
  const { isLoggedIn } = useSelector((state: any) => state.isLoggedIn);
  return (
    <Stack.Navigator
      initialRouteName={Route.welcomescreen}
      screenOptions={{
        headerShown: false,
        
      }}
    >
      <Stack.Screen component={MainScreen} name={Route.mainScreen} />
      <Stack.Screen component={Profile} name={Route.profile} />
    </Stack.Navigator>
   )
}

1. 修正属性名拼写错误 #

你使用的cardStyleInterpolators是复数形式，但React Navigation v6的Native Stack中正确的属性名是**cardStyleInterpolator（单数）**，属性名不匹配会直接触发类型错误。

2. 正确导入相关类型与工具 #

需要从@react-navigation/native-stack导入CardStyleInterpolators（内置的动画插值器集合），方便直接使用预设动画。

3. 显式指定类型（可选但推荐） #

给screenOptions显式指定NativeStackNavigationOptions类型，避免TypeScript的类型推断偏差。

修改后的代码示例 #

// 补充导入CardStyleInterpolators
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
  NativeStackNavigationOptions,
  NativeStackNavigationEventMap,
  CardStyleInterpolators, // 新增导入
} from "@react-navigation/native-stack";

// ... 其余代码不变 ...

function CommonStacks() {
  const { isLoggedIn } = useSelector((state: any) => state.isLoggedIn);
  return (
    <Stack.Navigator
      initialRouteName={Route.welcomescreen}
      // 显式指定类型，并配置正确的动画属性
      screenOptions={{
        headerShown: false,
        // 使用单数属性名
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        transitionSpec: {
          open: {
            animation: 'timing',
            config: {
              duration: 350,
              easing: Easing.inOut(Easing.ease),
            },
          },
          close: {
            animation: 'timing',
            config: {
              duration: 350,
              easing: Easing.inOut(Easing.ease),
            },
          },
        },
      } as NativeStackNavigationOptions}
    >
      <Stack.Screen component={MainScreen} name={Route.mainScreen} />
      <Stack.Screen component={Profile} name={Route.profile} />
    </Stack.Navigator>
   )
}

额外说明 #

• 如果需要自定义动画插值器，直接编写符合CardStyleInterpolator类型的函数即可，无需依赖内置集合。
• 若仍存在类型问题，可检查@react-navigation/native-stack的版本是否为v6.x，低版本可能存在类型定义差异。

内容的提问来源于stack exchange，提问作者Wahas Ali Mughal