React Navigation Typescript中的路径名称、路径参数类型

sdnqo3pr 于 2023-02-05 发布在 React

关注(0)|答案(1)|浏览(145)

我正在使用ReactNavigation v6沿着 typescript
我已经创建了一个助手函数

export function navigate(routeName, routeParams) {
  navigationRef.current?.navigate(routeName, routeParams);
}

我应该为routeName & routeParams指定什么类型，以便它正确地检查这些参数？

我的StackNavigator有以下类型

export type StackNavigator = {
  Welcome: undefined;
  Username: undefined;
  Password: undefined;
  ForgotPassword: {id: number};
};

react-native

来源：https://stackoverflow.com/questions/75319378/type-of-route-name-route-params-in-react-navigation-typescript

1条答案

按热度按时间

wgxvkvu91#

可使用以下类型键入routeName参数

type Routes = keyof StackNavigator

但routeParams将是动态的，即routeParams将根据routeName更改
它可以是

{id: number} or undefined

因此，为了基于第一参数的值计算第二参数，我们可以执行以下操作

type NavigationArgs = {
  [Route in keyof StackNavigator]: [
    routeName: Route,
    routeParams?: StackNavigator[Route],
  ];
}[keyof StackNavigator];

export function navigate(...args: NavigationArgs) {
  const [routeName, routeParams] = args;
  navigationRef.current?.navigate(routeName, routeParams);
}

这将确保严格的类型检查

赞(0）回复(0）举报 2023-02-05

我来回答

React Navigation Typescript中的路径名称、路径参数类型

1条答案

相关问题

热门标签

最新问答