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

Question

我是反应式导航的新手，想知道如何处理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;
};