时间戳

首页 > 解决方案 > 如何在 React Navigation 中正确键入 useNavigation？

typescript - 如何在 React Navigation 中正确键入 useNavigation？

问题描述

我正在尝试useNavigation从 React Navigation 中输入。我希望能够只传递路线的名称，但除非我也传递该路线的道具，否则我会收到错误消息。

按照文档，我理解实现应该是这样的：

import { StackNavigationProp } from '@react-navigation/stack';

type StackParamList = {
    Home: { foo: string, onBar: () => void }
    About: AboutProps
}

type NavigationProps = StackNavigationProp<StackParamList>

const MyComponent = () => {
  const navigation = useNavigation<NavigationProps>()

  const handleOnNavigate = () => navigation.navigate('Home')
  //                                                    ^ TypeError!

我在最后一行得到一个 TypeError 。如果我为该路线添加道具，错误就会消失，但我不应该这样做。

navigation.navigate('Home', { foo: 'hello', onBar: () => {} })

查看navigation.navigate（见下文）的类型声明，这应该不是必需的，因为简单地将路由名称作为唯一参数传递存在重载。我一定是做错了什么，因为这是不被接受的……但是什么，在哪里，为什么？

这是一个重现 TypeError 的 CodeSandBox。

React Navigation types.d.ts (链接)

navigate<RouteName extends keyof ParamList>(...args: undefined extends ParamList[RouteName]
  ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]]
  : [screen: RouteName, params: ParamList[RouteName]])
: void;

标签： typescriptreact-nativereact-navigationreact-navigation-stack

解决方案

我在最后一行得到一个 TypeError 。如果我为该路线添加道具，错误就会消失，但我不应该这样做。

您在类型中指定了这一点：

Home: { foo: string, onBar: () => void }

这意味着Home需要这些参数。如果您的路线不使用任何参数并且您可以这样做navigate('Home')，那么您不应该在类型中指定任何参数。

如果这些参数是可选的，那么您需要相应地指定类型：

Home: { foo: string, onBar: () => void } | undefined

推荐阅读