打字稿和反应导航：关于 NavigationContainer ref 的类型信息？

Question

我正在使用 react-navigation & 我遇到了一个用例，我需要从组件外部进行导航（接收推送通知后的导航）。

问题是，当在组件内部使用 navigation.navigate 方法时，我会根据文档定义的所有类型获得正确的 Typescript Autocomplete 和 Intellisense。

但是，在使用 navigationRef.current?.navigate 方法时，缺少类型信息。

有没有办法将类型信息也带入 ref 对象？

Answer 1

您可以通过为 navigate 方法提供泛型类型来实现。

假设您有一些屏幕，并且您像这样声明了路由名称参数列表类型 (taken from here)：

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

为了在您的导航方法中获取有关这些路由的类型信息，您可以使用上面声明的类型作为泛型，如下所示：

// You will now be able to choose between 'Home' or 'Profile' or 'Feed' when invoking your navigate method
navigationRef.current?.navigate<keyof RootStackParamList>('Home');