没有重载匹配此调用错误：React Native Navigation答案

【问题标题】：No overload matches this call error: React Native Navigation没有重载匹配此调用错误：React Native Navigation
【发布时间】：2023-02-01 15:23:57
【问题描述】：

我对 React Native 和 React Native Navigation 还很陌生。我收到一条错误消息：

    "message": "No overload matches this call.\n  Overload 1 of 2, '(...args: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.\n  Overload 2 of 2, '(options: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.",

关于'Signup'。以前，我没有遇到这个问题，而且我似乎无法弄清楚为什么会发生这种情况。我发现的所有示例都与导航问题无关。我尝试将 <RootStackParamList> 添加到 navigation.navigate<RootStackParamList>('Conversation')，但这只会导致另一个错误，将其添加到 useNavigation 也没有任何作用。对于我可能会遇到此问题的任何帮助或建议，我将不胜感激。谢谢！

主屏幕.tsx

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, FlatList, Alert } from 'react-native';
import { 
  Text, 
  TextInput, 
  Pressable, 
  ActivityIndicator, 
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Text, View } from '../components/Themed';*/
import { useQuery, gql } from '@apollo/client';
import { RootStackParamList} from '../navigation/types';

export default function HomeScreen() {
  
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Pressable 
        onPress={() => {console.warn('navigate'); navigation.navigate('Signup')}} 
      >
        <Text 
            New here? Sign up
        </Text>
      </Pressable>   
    </View>
  );
}
);

类型.tsx

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

export type RootStackParamList = {
  Home: undefined;
  Conversation: undefined;
  Login: undefined;
  Signup: undefined;
  NotFound: undefined;
  Splash: undefined;
};

export type MessageNavProps<T extends keyof RootStackParamList> = {
  navigation: StackNavigationProp<RootStackParamList, T>;
  route: RouteProp<RootStackParamList, T>;
};

【问题讨论】：

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

【解决方案1】：

您看到的错误是在 Typescript 级别，因此它不会阻止您使用导航器。它告诉您导航器未键入，因此它不希望导航到任何地方。

您可以将 useNavigation 调用更改为如下所示：

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

并且 react-navigation 将从您的参数列表中获取路线名称。

【讨论】：

【解决方案2】：

如果您想采用更简单且有点黑客的方式..只需这样做：

navigation.navigate("YourRouteName" as never);

【讨论】：