javascript - React Navigation navigation.navigate ("SomeScreen") TypeScript 错误

Question

使用 TypeScript 时，react-navigation 中发生的一个常见错误是:

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'

这可能是由什么引起的？

Answer 1

当没有定义特定屏幕的类型时会发生这种情况。

我将在 useNavigation 中描述设置堆栈导航类型和用法钩子(Hook)，以及传递 {navigation}通过 Prop 到屏幕。

首先，设置 Stack Navigator:

/**
* Types for Stack Navigator.
*/
export type StackParamList = {
  Main: undefined;
  Home: undefined;
};

const Stack = createStackNavigator<StackParamList>();

使用 useNavigation 时钩子(Hook):

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

/**
 * Types for the Stack Navigator.
 */
export type StackNavigation = StackNavigationProp<StackParamList>;

const navigation = useNavigation<StackNavigation>();

在屏幕中将导航作为 Prop 向下传递时:

/**
 * Types for passing the navigation props to screens in the Stack Navigator.
*/
export type StackNavigationProps = {
  navigation: StackNavigation;
};

const SomeScreenInTheStack = ({ navigation }: StackNavigationProps) => {
...
}

我在另一个问题中扩展了答案，就像这样，但发现 OP 没有正确标记帖子，所以我创建了这个问答。

希望这对某人有用!