在 TypeScript 中指定 React 导航抽屉类型的正确方法是什么？

Question

我对如何在 TypeScript 代码中显式输入我的 Drawer Navigator 感到困惑。

我可以轻松地让事情按照我的预期运行，例如，在下面的代码中。特别是抽屉特定的方法（例如，

openDrawer

等）都按其应有的方式工作。但我的 linter 抱怨这些方法都没有定义为

TS2339：类型“NavigationProp { key: string;”上不存在属性“openDrawer”；索引号;路线名称：从不[]；历史？：未知[] |不明确的;路线：NavigationRoute[]；类型：字符串；过时的：假的； }>、{}、{}>'。

我可以通过替换等技巧来解决这个问题

 const navigation = useNavigation()

与

 const navigation: Drawer = useNavigation()

但总是出现某种错误（此处为“TS2304：找不到名称‘抽屉’。”）。并且可以通过猜测来消除错误

 const navigation: Drawer.DrawerNavigationProp<any> = useNavigation()

但我已经不知道那里发生了什么。

指定

navigation

是导航抽屉的正确方法是什么（我什至不确定指定的正确类型）？

---

NavigationExample.tsx：

import React, { ReactElement }  from 'react'
import {useNavigation} from "@react-navigation/native"

const NavigationExample = (): ReactElement => {
    const navigation = useNavigation()

    return (
        <View style={ styles.container }>
            <Text style={ styles.testText }>Navigation</Text>
            <Button onPress={ () => navigation.toggleDrawer() } title="Toggle" color="blue" />
            <Button onPress={ () => navigation.openDrawer() } title="Open" color="green" />
            <Button onPress={ () => navigation.closeDrawer() } title="Close" color="red" />
        </View>
    )
}

App.tsx：

import NavigationExample from './components/NavigationExample'
//...

import { createDrawerNavigator } from '@react-navigation/drawer'
import { NavigationContainer } from '@react-navigation/native'

export const Drawer = createDrawerNavigator()

const App = () =>  {
  return (
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Navigation" component={ NavigationExample } />
          // ...
        </Drawer.Navigator>
      </NavigationContainer>
  )
}

export default App

Answer 1

我不确定这是否是“正确”的方法，但这是我们在某些项目中使用它的方式：

import { 
  NavigationContainer, 
  useNavigation, 
  NavigationProp, 
  ParamListBase 
} from "@react-navigation/native"
import { 
  createDrawerNavigator, 
  DrawerNavigationProp 
} from "@react-navigation/drawer";

/* ... */

const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>()

Answer 2

openDrawer(), closeDrawer(), toggleDrawer()

不是usenavigation钩子的属性。您可以使用调度来实现它。看看下面的代码：

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

在组件或屏幕顶部加载导航。

const navigation = useNavigation();

在你的函数内部

navigation.dispatch(DrawerActions.openDrawer());