React Navigation传递tabBarOptions出现类型匹配报错如何解决

算力阿峰

2026-10-9

报错成因

你当前使用的是 v6 及以上版本的 @react-navigation/bottom-tabs，该版本已正式废弃并移除了旧版本中的tabBarOptions属性，所有底部标签栏的配置项都被整合到screenOptions属性下，因此传递不存在的tabBarOptions属性会触发TypeScript类型校验报错。

解决方法

将原tabBarOptions中的配置项迁移到screenOptions中，对应属性名需要加上tabBar前缀，修改后的代码如下：

import React from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { AppStackRoutes } from './app.stack.routes';

import { useTheme } from 'styled-components';
import { Platform } from 'react-native';

const { Navigator, Screen } = createBottomTabNavigator();

export function AppTabRoutes() {
  const theme = useTheme();

  return (
    <Navigator
      screenOptions={{
        tabBarActiveTintColor: theme.colors.main,
        tabBarInactiveTintColor: theme.colors.text_detail,
        tabBarShowLabel: false,
        tabBarStyle: {
          paddingVertical: Platform.OS === 'ios' ? 20 : 0,
          height: 78,
          backgroundColor: theme.colors.background_primary
        }
      }}
    >
      <Screen
        name="Home"
        component={AppStackRoutes}
      />
    </Navigator>
  )
}