在 react-navigation v5 中处理路由名称的最佳实践

Question

我是 React navtive 的新手，想知道如何处理 react-navigation v5 的路由名称。

我正在开始一个公司内部样板项目，在版本 4 中使用 react-navigation 并将其更新到版本 5。到目前为止一切正常。

现在的问题是，该项目正在使用一个文件，该文件的所有路由名称都定义为：

export const HOME_ROUTE = 'Home';
export const LOGIN_ROUTE = 'Login';
export const REGISTER_ROUTE = 'Register';

这也适用于 react-navigation v5。

然后我想消除任何类型的导航道具上的警告。 documentation 声明我应该添加类型定义。然后我运行进入第一个问题

有了路由常量，我会喜欢这样做：

export type RootStackParamList = {
  HOME_ROUTE: undefined;
  LOGIN_ROUTE: undefined;
  REGISTER_ROUTE: undefined;
};

那行不通，因为我找不到在类型定义中使用常量的方法（这很有意义）。

我正在考虑完全删除 routeConstants，但缺点是我在输入路由名称时没有自动完成功能，这可能会导致难以发现错误。至少我认为这可能会发生。

有没有更好的方法来处理这个问题？我查看了其他一些样板项目，但它们都只使用字符串作为路由名称。

Answer 1

感谢一位同事，我找到了解决方案：

解压常量的语法如下：

export type RootStackParamList = {
  [HOME_ROUTE]: undefined;
  [LOGIN_ROUTE]: undefined;
  [REGISTER_ROUTE]: undefined;
};