如何使用 NavigationHelpersCommon 键入检查 ReactNavigation 的导航？

Question

我是typescript屏幕的新手，所以答案可能是显而易见的。我将ReactNavigation的navigator作为一个道具传递给一个功能组件，目前我使用navigator: object进行类型检查，但我希望使用ReactNavi导航中的typescript定义，因此我的代码不会抱怨诸如"；navigation.导航"；等等

我在@react-navigation/core/lib/typescript/src/types.d.ts中找到了类型定义；但它不出口。

我在ReactNavigation文档中也发现了这一点，这表明我可能完全以错误的角度来处理这个问题。

https://reactnavigation.org/docs/typescript/#annotating-使用导航

或者，也许我应该找到一种使用useNavigation钩子的方法，但这需要我使用use组件，而不是我喜欢的函数。

底线：如何导入NavigationHelpersCommon声明以进行类型检查？

Answer 1

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

你必须根据所有屏幕的名称，最终根据它们的参数，键入所有屏幕，使用这些类型，可以为每个屏幕创建类型。

--

例如，如果您有一个没有任何参数的Home组件，而另一个名为About的屏幕所需参数为name，则如下所示：

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

首先在自己的文件中创建一个与屏幕相对应的类型，并将其导出到不同的地方使用：

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

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

import { RootStackParamList } from 'your/file';
const Stack = createStackNavigator<RootStackParamList>();

最后一件事是为每个页面创建必要的类型(或者可以创建一个util或带有Typescript的东西，以便只有一个以页面名称为参数的声明(。你可以在第一种类型的文件中这样做，现在看起来像这样：

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

最后，在你的功能组件中，根据你所在的页面，你可以有一个完全键入的navigation道具：

import { HomeScreenNavigationProp } from 'your/file';
type Props = {
navigation: HomeScreenNavigationProp;
};