TS严格模式下React Navigation底部导航报No overload matches this call错误

报错原因 #

你定义的createScreenOptions函数参数格式不符合@react-navigation/bottom-tabs的类型要求：screenOptions接收的函数入参是同时包含route和navigation两个属性的对象，不是直接的route对象。同时你的tabBarIcon参数定义也不符合规范，它的入参是包含size、color的对象，不是两个独立参数。

修复方案 #

修改后的app.navigator.tsx代码 #

import React from "react";
import { createBottomTabNavigator, BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
import { RouteProp } from '@react-navigation/native';
import { Ionicons } from "@expo/vector-icons";

import { HomeNavigator } from "./home.navigator";

// 定义底部Tab路由参数列表，符合TS严格模式规范
type RootTabParamList = {
  Hjem: undefined;
};

const Tab = createBottomTabNavigator<RootTabParamList>();

const TAB_ICON: Record<keyof RootTabParamList, string> = {
  Hjem: "md-home",
};

// 调整入参格式，指定正确类型
const createScreenOptions = ({ route }: { route: RouteProp<RootTabParamList, keyof RootTabParamList> }): BottomTabNavigationOptions => {
  const iconName = TAB_ICON[route.name];
  return {
    // 修正tabBarIcon入参格式
    tabBarIcon: ({ size, color }: { size: number; color: string }) => (
      <Ionicons name={iconName} size={size} color={color} />
    ),
  };
};

export const AppNavigator = () => (
      <Tab.Navigator
        screenOptions={createScreenOptions}
        tabBarOptions={{
          activeTintColor: "red",
          inactiveTintColor: "blue",
        }}
      >
        <Tab.Screen name="Hjem" component={HomeNavigator} />
      </Tab.Navigator>
);

其余文件不需要修改，修改后即可符合strict严格模式的类型校验要求，报错会自动消失。

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