Typescript 如何在导航'；s使用NavigationHelpersCommon进行导航？

我不熟悉打字脚本屏幕，所以答案可能是显而易见的。我正在将ReactNavigation的navigator作为道具传递给一个功能组件，目前我使用

navigator:object

进行类型检查，但希望使用ReactNavigation中的typescript定义，这样我的代码就不会抱怨“navigation.navigate”等问题

我在

@react导航/core/lib/typescript/src/types.d.ts

中找到了类型定义；但是，它没有出口

我在ReactNavigation文档中也发现了这一点，这表明我可能完全以错误的角度接近这一点

或者我应该找到一种方法来使用

useNavigation

hook，但这要求我使用的组件不是我喜欢的功能

---

底线：如何导入

NavigationHelpersCommon

声明以进行类型检查？

正如您从链接的文档中看到的，键入功能组件是一个多步骤的过程

您必须根据名称和参数键入所有屏幕，并使用这些类型为每个屏幕创建类型

--

例如，如果您有一个没有任何参数的

Home

组件和另一个名为

About

的屏幕，其中所需参数为

name

，类似于：

<Stack.Navigator
  initialRouteName="Home"
>
  <Stack.Screen
    name="Home"
    component={Home}
  />
  <Stack.Screen
    name="About"
    component={About}
    initialParams={{ name: 'Gabriel' }}
  />
</Stack.Navigator>

现在，在定义堆栈导航器时，可以使用创建的类型：

import { RootStackParamList } from 'your/file';

const Stack = createStackNavigator<RootStackParamList>();

最后，在功能组件中，根据您所处的页面，您可以拥有一个完整类型的

导航

道具：

import { HomeScreenNavigationProp } from 'your/file';

type Props = {
  navigation: HomeScreenNavigationProp;
};

import { StackNavigationProp } from '@react-navigation/stack';


export type RootStackParamList = {
  Home: undefined;
  About: { name: string };
};

export type HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Home'
>;

export type AboutScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'About'
>;

import { HomeScreenNavigationProp } from 'your/file';

type Props = {
  navigation: HomeScreenNavigationProp;
};