Ошибка навигации React — TypeScript — это выражение не вызывается

Я пытаюсь найти лучший способ решить эту проблему с машинописным текстом, с которой я столкнулся при обновлении до React Navigation 5. Я получаю сообщение об ошибке:

This expression is not callable.
  Each member of the union type '{ <RouteName extends "Stack1Screen1" | "Home">(...args: 
undefined extends SampleParamList1[RouteName] ? [RouteName] | [RouteName, 
SampleParamList1[RouteName]] : [...]): void; <RouteName extends "Stack1Screen1" | 
"Home">(route: { ...; } | { ...; }): void; } | { ...; }' has signatures, but none of those 
signatures are compatible with each other.ts(2349)

Вот код, который я по существу использую:

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

export type SampleParamList1 = {
  Stack1Screen1: undefined;
  Home: undefined;
};
export type SampleParamList2 = {
  Stack2Screen2: undefined;
  Home: undefined;
};

type Props =
  | StackScreenProps<SampleParamList1, 'Stack1Screen1'>
  | StackScreenProps<SampleParamList2, 'Stack2Screen2'>;

const ThisScreen: React.FC<Props> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('Home');
};

При наведении курсора на функцию navigation.navigate('Home') отображается сообщение об ошибке. Любые идеи о том, как решить эту проблему? Спасибо! :)


react-native reactjs typescript react-navigation react-navigation-v5
person Dres    schedule 29.10.2020    source источник
comment
Какой смысл использовать два отдельных типа для описания свойств экрана в стеке навигации? Почему нельзя просто слиться воедино?   -  person Николай Гольцев    schedule 29.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я использовал что-то вроде этого.

export type RandomParamList = {
    ScreenRandom1: undefined;
    ScreenRandom2: undefined | { screen: string }; // arguments
    ScreenRandom3: undefined | { screen?: string, params: { param1: string } };
} ;
export type HomeParamList = {
    HomeScreen1: undefined;
    HomeScreen2: undefined | { screen: string };
    HomeScreen3: undefined | { screen?: string, params: { param1: string } };
    HomeScreen4: undefined;
    HomeScreen5: undefined | { screen: string };
} & RandomParamList;

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

const ThisScreen: React.FC<HomeNavProps> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('HomeScreen1');
const navToHome = () => navigation.navigate('Home'); // you will get error that Home is not allowed
};
person anthony willis muñoz    schedule 29.10.2020