如何在 TypeScript 中使用 navigation.replace？答案

【问题标题】：how to use navigation.replace in TypeScript?如何在 TypeScript 中使用 navigation.replace？
【发布时间】：2020-10-28 20:55:10
【问题描述】：

我正在尝试在我的代码中使用它：

const navigation = useNavigation();
navigation.replace('AllFriends')

但我不断收到错误消息：

Property 'replace' does not exist on type 'NavigationProp<Record<string, object | undefined>, string, NavigationState, {}, {}>'.

我也试过用这个

const navigation =  useNavigation<StackNavigationProp<{route: {} }>>()
navigation.replace('route');

这里建议：https://github.com/react-navigation/react-navigation/issues/8256

但这给了我替换预期的 2 个参数但只有 1 个的错误...

我正在使用“@react-navigation/native”：“^5.5.1”，

【问题讨论】：

标签： javascript reactjs typescript react-native react-navigation

【解决方案1】：

const navigation =  useNavigation<StackNavigationProp<{route: {} }>>()
navigation.replace('route');

【讨论】：

【解决方案2】：

replace 方法仅适用于 StackNavigator 中的屏幕。我们需要一种方法来明确键入屏幕是这样的。

当您实例化您的 StackNavigator 时，您可以传入一个类型，该类型使用它们期望接收的参数来定义您的路由：

export type StackParams = {
   MyRoute: undefined;
   AnotherRoute: {
      id: number
   }
}

createStackNavigator<StackParams>();

然后在屏幕中将该参数列表传递给StackNavigationProp

import { StackNavigationProp } from '@react-navigation/stack/';
import { StackParams} form 'your/routes';

const navigation =  useNavigation<StackNavigationProp<StackParams>>()
navigation.replace('route');

这样做确认这是一个堆栈屏幕并提供您可以导航到的路线列表：

replace('AnotherRoute') //success!
replace('FakeRoute') //error, this was not defined in our RouteParams

【讨论】：

【解决方案3】：

如此处所述：https://github.com/react-navigation/react-navigation/issues/7820#issuecomment-689646876

最简单的方法是这个：

const navigation = useNavigation&lt;StackNavigationProp&lt;ParamListBase&gt;&gt;();

【讨论】：