Typescript & react-navigation： Type Information on NavigationContainer ref？

Question

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

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

然而，当使用navigationRef.current?.navigate方法时，不存在类型信息。

有没有办法把类型信息也带到ref对象中？

Answer 1

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

假设您有一些屏幕，您声明了路由名称参数列表类型(取自此处(，如下所示：

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');

Answer 2

我在实现推送通知时也遇到了同样的问题。我所做的是创建一个导航助手文件(navigationHelper.ts(

import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}

在AppNavigator.tsx 中

从"导入｛navigation｝/helpers/NavigationHelper'；

messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage,
);
let data = JSON.parse(remoteMessage?.data?.data);
if (data?.page == 'ride_detail') {
navigate('RideDetailsIndex', {id: data?.ride_id});
}
});