在 React 导航 v5 上使用 typescript 和 useRoute

Question

我尝试使用如下方式提取参数useRoute。

  const route = useRoute();
  const { params } = route;
  const {
   id, name,
  } = params;

一切正常，但 linter 突出显示id并name出现以下错误。

属性“id”在类型“object | ”上不存在 不明确的

我该如何克服这个问题。

Answer 1

react-navigation导出一些实用程序类型，使您在使用钩子和为自己的组件定义道具时更轻松。它们取决于您首先为导航器定义类型。

假设您有一个包含两个屏幕 A 和 B 的堆栈。首先定义每个屏幕需要哪些参数：

type StackParamsList = {
  A: undefined;
  B: {
    id: string;
    name: string;
  };
}

useRoute在屏幕 B 中输入：

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

const route = useRoute<RouteProp<StackParamsList, 'B'>>();

route.params.id // OK
route.params.foo // error

查看React-navigation 文档中的使用 Typescript 进行类型检查一文，了解更多详细信息以及键入导航堆栈的其他元素的示例。