No overload matches this call error: React Native Navigation

Question

我对 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

什么也没做。对于我可能会遇到此问题的任何帮助或建议，我将不胜感激。谢谢！

HomeScreen.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>;
};

Answer 1

您看到的错误是在 Typescript 级别，因此它不会阻止您使用导航器。它告诉你导航器没有输入，所以它不会导航到任何地方。

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

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

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

Answer 2

使用

native-stack

时，用法将如下所示：

import {ParamListBase, useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

const Component = () => {
  const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>();
  //...
}

Answer 3

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

navigation.navigate("YourRouteName" as never);

Answer 4

这个错误通常发生在你使用函数不正确或者输入参数不正确的情况下。您需要检查语法并确保所有输入参数都以正确的数据类型传递。

如果在导航过程中出现错误，请检查您是否正确注册了所有屏幕和路线。如果有任何问题，请参阅路由库的文档或查看您的源代码以确定具体错误。

如果您无法自行解决问题，请寻求编程社区的帮助。

import {useNavigation, ParamListBase} from '@react-navigation/native';

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

const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>();