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

Question

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

我正在开始一个公司内部样板项目，在版本 4 中使用反应导航，并将其更新到版本 5。到目前为止，一切运行良好。

现在的问题是，该项目使用的文件的所有路由名称定义如下：

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

这也适用于 React-navigation v5。

然后我想消除任何类型的导航道具上的警告。文档指出我应该添加类型定义。然后我遇到了第一个问题。

对于路线常量，我希望以某种方式这样做：

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

这不起作用，因为我找不到在类型定义中使用常量的方法（这是有道理的）。

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

有处理这个问题的首选方法吗？我研究了其他一些样板项目，但它们都只是使用字符串作为路由名称。

Answer 1

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

解压常量的语法如下：

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