Typescript：使用 react-native v6 在 react-navigation 中从 useNavigation() 获取“replace”

Question

这个问题类似于这个how to use navigation.replace in TypeScript?，它是针对 react-navigation 5.

我也看了文档https://reactnavigation.org/docs/typescript/#annotating-usenavigation

尝试了几种不同的方法，但越来越困惑。

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'
import { NativeStackScreenProps } from '@react-navigation/native-stack'
import { AxiosError } from 'axios'

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  SignIn: undefined
  ResetPassword: { email?: string } | undefined
  Root: NavigatorScreenParams<RootTabParamList> | undefined
  Modal: undefined
  Error: { error?: AxiosError | null } | undefined
  DevToolsSignIn: undefined
}

export type RootTabParamList = {
  Overview: undefined
  Returns: undefined
  Portfolio: undefined
  More: undefined
}

export type RouteName = keyof RootStackParamList | keyof RootTabParamList

export const routeTypeGuard = (route: RouteName) => route as keyof RootStackParamList

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>

export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<
  BottomTabScreenProps<RootTabParamList, Screen>,
  NativeStackScreenProps<RootStackParamList>
>

然后在一个组件中，我希望告诉打字稿我应该能够从 useNavigation()

中破坏 replace

export default ({ route }: RootStackScreenProps<'ResetPassword'>) => {
  const { replace } = useNavigation<??>()
  const email = route.params?.email

  if (!email) replace('Error')

  return (
    <ScreenContainer>
      <Text style={{ color: 'hotpink' }}>{email}</Text>
    </ScreenContainer>
  )
}

Answer 1

这似乎可以解决问题

const { navigate, replace } = useNavigation<NativeStackNavigationProp<RootStackParamList>>()

这让我可以做如下事情：

replace('Root')

没有任何 TS 问题。

我的误解是替换不能替换到它想要的任何屏幕 - 它只能替换到它所在的导航中的任何屏幕。