Typescript & react-navigation：关于 NavigationContainer ref 的类型信息？

Question

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

问题是，当从组件内部使用 navigation.navigate 方法时，我会根据文档中定义的所有类型获得正确的 Typescript 自动完成和 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');

Answer 2

我在实现推送时也遇到了同样的问题notification.What我已经完成了，创建了一个导航帮助文件（navigationHelper.ts）。

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
    navigationRef.current?.navigate(name, params);
}

在AppNavigator.tsx

从“./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});
          }
        });

Typescript & react-navigation：关于 NavigationContainer ref 的类型信息？

Typescript & react-navigation: Type Information on NavigationContainer ref?

javascript

typescript

react-native

react-navigation

react-navigation-v5