传递反应导航的 tabBarOptions 属性时出错

Question

我正在创建一个应用程序并添加了 React 导航，但是当我尝试传递 tabBarOptions 时，它显示以下错误：

No overload matches this call.
  Overload 1 of 2, '(props: Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & { ...; } & BottomTabNavigationConfig, "initialRouteName" | ... 3 more ... | "defaultScreenOptions"> & DefaultRouterOptions<...> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: Element; tabBarOptions: { activeTintColor: string; inactiveTintColor: string; showLabel: boolean; style: { paddingVertical: number; height: number; backgroundColor: string; }; }; }' is not assignable to type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
      Property 'tabBarOptions' does not exist on type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
  Overload 2 of 2, '(props: PropsWithChildren<Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & { ...; } & BottomTabNavigationConfig, "initialRouteName" | ... 3 more ... | "defaultScreenOptions"> & DefaultRouterOptions<...> & { ...; }>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: Element; tabBarOptions: { activeTintColor: string; inactiveTintColor: string; showLabel: boolean; style: { paddingVertical: number; height: number; backgroundColor: string; }; }; }' is not assignable to type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.
      Property 'tabBarOptions' does not exist on type 'IntrinsicAttributes & Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: Bottom...'.ts(2769)
(JSX attribute) tabBarOptions: {
    activeTintColor: string;
    inactiveTintColor: string;
    showLabel: boolean;
    style: {
        paddingVertical: number;
        height: number;
        backgroundColor: string;
    };
}

我正确地遵循了文档

https://reactnavigation.org/docs/bottom-tab-navigator/#example

---

这是我的路由文件的样子：

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
      tabBarOptions={{
        activeTintColor: theme.colors.main,
        inactiveTintColor: theme.colors.text_detail,
        showLabel: false,
        style: {
          paddingVertical: Platform.OS === 'ios' ? 20 : 0,
          height: 78,
          backgroundColor: theme.colors.background_primary
        }
      }}
    >
      <Screen
        name="Home"
        component={AppStackRoutes}
      />
    </Navigator>
  )
}

欢迎提出建议

Answer 1

您链接到的文档没有这些选项。 tabBarOptions 属性在 React Navigation 6 中被弃用，你应该使用 screenOptions:

    <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
        }
      }}
    >

当您运行应用程序时，您还应该在控制台中收到弃用警告。