没有重载与此调用错误匹配：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

使用时native-stack，用法将如下所示：

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

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

Answer 2

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

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

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

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