react native typescript 'string' nu poate fi atribuit parametrului de tip 'never.' în useNavigation

[Primesc în mod constant eroarea care spune că 'string' nu poate fi atribuit unui parametru de tip 'never' în React Native TypeScript și nu știu de ce. Poate cineva mă poate ajuta să rezolv acest bug.]

Mulțumesc anticipat.

fragment de cod :

const loadReport = (id: string) => {
    setPostId(id);
    navigation.navigate('Report', {postId: id});
}

Primesc un subliniat sub 'Raport'.

Răspuns #1

Aceasta este o problemă ciudată care apare în RN > 0.65. Soluția mea:

1.- Import:

{/* Depends of your Package (Stack or NativeStack...) */}
import { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';

2.- Definește tipurile

export type RootStackParamList = {
  YourScreen: { id: number } | undefined;
};

3.- Atribuie hook-ul useNavigation cu tipul StackNavigationProp.

const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

4.- Folosește-l! (Atenție: cu acest tip poți accesa obiectul de navigare)

<TouchableOpacity
   // Use this when you pass a parameter (is optional)
   onPress={() => navigation.navigate('YourScreen', {id: 5})}>
</TouchableOpacity>

5.- Amintește-ți aceste note:

• Specificarea undefined înseamnă că ruta nu are parametri. Un tip de uniune cu undefined => AnyType | undefined înseamnă că parametrii sunt opționali.

• Constanta useNavigation are un tip special și acest tip final ia 3 generice:

• Obiectul listei de parametri => RootStackParamList

• Numele traseului ecranului => RouteName

• ID-ul navigatorului (opțional) => NavigatorID

Obținut de la: https://reactnavigation.org/docs/typescript/#annotating-usenavigation

Răspunsul #2

Singura soluție pe care am găsit-o este să aplic tipul never pe șirul name.

const goToContent = () => {
    navigate("Content" as never, {} as never);
};

Nu sunt sigur că este cea mai bună soluție, dar funcționează.

Răspunsul #3

O soluție simplă este să adaugi any la tipul NativeStackNavigationProp

const AppLink = ({
  text,
  screenName,
}: Link) => {

  // pass any to overload 
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const handleNavigation = () => {
    navigation.navigate(screenName);
  };  
  
  return (
    <TouchableOpacity onPress={handleNavigation}>
      <Text>{text}</Text>
    </TouchableOpacity>
  );
};

export default AppLink;

Răspunsul #4

Și eu primeam următoarea eroare ts când nu adnotam useNavigation și încercam să apelez navigation.navigate('OtherJazzyScreen)`:

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'

OP nu specifică ce versiune de react-navigation folosește, dar poți rezolva asta la nivel global în React Navigation 6, ceea ce înseamnă că nu trebuie să adnotezi useNavigation direct, dar tot primești completarea automată și verificarea tipurilor.

Preluat de pe blogul react-navigation în august 2021 (https://reactnavigation.org/blog/2021/08/14/react-navigation-6.0/#better-type-safety):

În React Navigation 6, nu trebuie să adnotezi useNavigation pentru a obține completarea automată și verificarea tipurilor. Acest lucru este posibil prin definirea unui tip pentru ecrane la nivel global folosind fuziunea declarațiilor:

declare global {   
  namespace ReactNavigation {
    interface RootParamList {
      Home: undefined;
      Profile: { userId: string };
      NotFound: undefined;
    }   
  } 
 } 

Poți citi mai multe despre asta în documentația noastră TypeScript.

Un alt exemplu din documentația React Navigation 6, dacă deja ai parametrii declarați în altă parte:

// E.g. RootStackParamList.ts
export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  NotFound: undefined;
};

// E.g. App.tsx
import { RootStackParamList } from 'path/to/RootStackParamList';
declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

Răspunsul #5

Folosește pur și simplu tipul any atunci când apelezi hook-ul:

const navigation = useNavigation<any>();

Aceasta nu este metoda recomandată de a face lucrurile, dar va face ca eroarea din cod să dispară.