我不明白 TypeScript Drawer 组件缺少什么

Question

我是 TypeScript 的新手，在继续构建应用程序的过程中一直在努力学习。

我在 VSCode 中看到的错误是：

Type '{ state: DrawerNavigationState<ParamListBase>; navigation: DrawerNavigationHelpers; descriptors: DrawerDescriptorMap; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

此错误出现于 CustomDrawerContent

我的代码目前实现的方式是：

const Drawer = createDrawerNavigator<RootDrawerParamList>();

const CustomDrawerContent = () => {
  return (
    <SafeAreaView>
      <Text>Hellow</Text>
    </SafeAreaView>
  );
};

const DrawerNavigation = () => {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name="RootDrawer" component={LandingStackNavigation} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigation;

我为此创建的类型是 RootDrawerParamList。即：

export type RootDrawerParamList = {
  RootDrawer: DrawerScreenProps<LandingStackParamList>;
};

关于这个我错过了什么？感谢您帮助我理解应该如何处理此类错误

Answer 1

您使用的 react-navigation 是哪个版本。

我使用的版本中的类型定义是：

export function createDrawerNavigator(
  routeConfigMap: NavigationRouteConfigMap,
  drawerConfig?: DrawerNavigatorConfig
): NavigationContainer;

Answer 2

您正在将 {...props} 传递给 CustomDrawerContent，但它不接受您代码中的任何属性 (const CustomDrawerContent = () => {)。

The type I created for this was RootDrawerParamList. Which is:

这无关紧要，但也不正确。您需要为屏幕接受的任何参数指定类型，但是您已经为屏幕的道具指定了类型。参数和道具不是一回事。

我不明白 TypeScript Drawer 组件缺少什么

Am not understanding what is missing for TypeScript Drawer component

typescript

react-native

react-navigation