typescript - 没有重载匹配此调用错误 : 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什么也没做。对于我可能会遇到此问题的任何帮助或建议，我将不胜感激。谢谢!

主屏幕.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 将从您的参数列表中获取路线名称。