传递react导航的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/示例

---

这是我的路由文件:

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

您链接到的文档没有这些选项。在React导航6中，tabBarOptions道具已被弃用，你应该使用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
}
}}
>

当你运行应用程序时，你也应该在控制台中得到弃用警告。

Answer 2

实际上不是tabBarStylebarStyle={}． 你可以在material-tab文档

中找到它