reactjs - React 抽屉导航内容 Prop 类型定义

Question

我正在使用 this guide 创建自定义抽屉内容:

const DrawerContent = (props) => (
  <DrawerContentScrollView {...props}>
    <AntDesign
      name="close"
      size={32}
      onPress={() => props.navigation.closeDrawer()}
    />
    <Text>TEST</Text>
    <DrawerItemList {...props} />
  </DrawerContentScrollView>
);

它运行良好，但我想对 props 参数进行类型检查。所以我试过:

import { DrawerContentComponentProps } from '@react-navigation/drawer';

const DrawerContent = (props: DrawerContentComponentProps) => (
  // Same stuff
);

但是我的 IDE 现在告诉我 props.navigation.closeDrawer 不存在，但它确实存在。

定义 props 函数的 DrawerContent 类型的正确方法是什么？

Answer 1

这是 react 导航库的一个已知问题:https://github.com/react-navigation/react-navigation/issues/6790

为了使警告消失等待修复，您可以使用以下符号:

import { DrawerActions } from '@react-navigation/native';


<AntDesign
  name="close"
  size={32}
  // @see https://github.com/react-navigation/react-navigation/issues/6790
  onPress={() => navigation.dispatch(DrawerActions.closeDrawer())}
/>