React Native TypeScript中TabBarOptions属性报错问题求助

问题场景 #

将React Native JS代码转为TSX时，使用Tab.Navigator的tabBarOptions属性出现TypeScript类型错误，错误提示该属性不存在于组件的类型定义中。

原代码片段：

return (
<NavigationContainer>
  <Tab.Navigator
    initialRouteName={homeName}
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName: string | undefined;
        let rn = route.name;

        if (rn === homeName) {
          iconName = focused ? "home" : "home-outline";
        } else if (rn === profileName) {
          iconName = focused ? "person" : "person-outline";
        } else if (rn === registrationName) {
          iconName = focused ? "reader" : "reader-outline";
        }

        return <Ionicons name={iconName || ""} size={size} color={color} />;
      },
    })}
    
    tabBarOptions={{
      activeTintColor: "tomato",
      inactiveTintColor: "grey",
      labelStyle: { paddingBottom: 10, fontSize: 10 },
      style: { padding: 10, height: 70 },
    }}
  >
    <Tab.Screen name={homeName} component={HomeScreen} />
    <Tab.Screen name={profileName} component={ProfileScreen} />
    <Tab.Screen name={registrationName} component={RegistrationScreen} />
  </Tab.Navigator>
</NavigationContainer>

错误提示：

Type '{ children: Element[]; initialRouteName: "Home"; screenOptions: ({ route }: { route: RouteProp<RootStackParamList, keyof RootStackParamList>; navigation: any; }) => { ...; }; tabBarOptions: { ...; }; }' is not assignable to type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & DefaultRouterOptions & { ...; } & BottomTabNavigationConfig, "initialRout...'.
  Property 'tabBarOptions' does not exist on type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & DefaultRouterOptions & { ...; } & BottomTabNavigationConfig, "initialRout...'.ts(2322)

错误原因 #

React Navigation 6.x及后续版本已废弃tabBarOptions属性，所有底部标签栏的配置项均需合并到screenOptions中，这也是TypeScript报错的核心原因——当前组件的类型定义里已不再包含tabBarOptions属性。

修复方案 #

将tabBarOptions中的所有配置项，直接添加到screenOptions返回的对象中，注意配置项命名需加上tabBar前缀：

修复后的代码：

return (
<NavigationContainer>
  <Tab.Navigator
    initialRouteName={homeName}
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName: string | undefined;
        let rn = route.name;

        if (rn === homeName) {
          iconName = focused ? "home" : "home-outline";
        } else if (rn === profileName) {
          iconName = focused ? "person" : "person-outline";
        } else if (rn === registrationName) {
          iconName = focused ? "reader" : "reader-outline";
        }

        return <Ionicons name={iconName || ""} size={size} color={color} />;
      },
      // 原tabBarOptions的配置迁移到此处，命名添加tabBar前缀
      tabBarActiveTintColor: "tomato",
      tabBarInactiveTintColor: "grey",
      tabBarLabelStyle: { paddingBottom: 10, fontSize: 10 },
      tabBarStyle: { padding: 10, height: 70 },
    })}
  >
    <Tab.Screen name={homeName} component={HomeScreen} />
    <Tab.Screen name={profileName} component={ProfileScreen} />
    <Tab.Screen name={registrationName} component={RegistrationScreen} />
  </Tab.Navigator>
</NavigationContainer>

说明 #

React Navigation 6.x统一了配置命名规则，原tabBarOptions下的所有配置项都需要添加tabBar前缀，比如activeTintColor改为tabBarActiveTintColor，labelStyle改为tabBarLabelStyle，确保与新的类型定义匹配。

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