web-dev-qa-db-fra.com

React Natif avec TypeScript - Comment utiliser le UserOutE à partir de @ réacteur-navigation / natif avec type dactylographique

J'essaie d'obtenir mon incident objet de route.params Mais je ne sais pas comment le faire pour faire reconnaître dactylographier cette accessoire.

Voici la fonction qui accédant à mon détail page passant incident aux paramètres:

const navigateToDetail = (incident: IncidentProps): void => {
    navigation.navigate('Detail', { incident });
  };

Et voici une partie du code de page de détail où j'essaie d'obtenir cet objet à partir de route.params:

type IncidentRouteParams = {
  incident: IncidentProps;
}

const Detail: React.FC = () => {
  const navigation = useNavigation();
  const route = useRoute();

  const incident = route.params.incident;

Je pense que j'ai besoin de passer cela Incicidouteparams Tapez en quelque sorte à const route = useroute ()

Merci d'avance.

Voici l'image avec l'erreur:

Edit :

J'ai fait comme ça, et ça a fonctionné, mais je ne sais pas si c'est la bonne façon:

  const route = useRoute<RouteProp<Record<string, IncidentRouteParams>, string>>();

  const incident = route.params.incident;
typescriptreact-nativereact-navigation
9
Christian Prado

Vous pouvez également créer un type en considérant la paramliste que vous souhaitez. Vous n'avez donc besoin d'importer ce type dans votre composant et de transmettre la routename comme paramètre.

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

export type RootStackParamList = {
  Home: undefined;
  Feed: { sort: 'latest' | 'top' };
};

export type RootRouteProps<RouteName extends keyof RootStackParamList> = RouteProp<
  RootStackParamList,
  RouteName
>;

Usage:

export const Feed = () => {    
    const route = useRoute<RootRouteProps<'Feed'>>();
    return <Text>{route.params.sort}</Text>
}
1
Eduardo Wronscki

Ceci est trop compliqué. Il y a un moyen plus facile de définir les numéros de choix dans TS.

Installation:

type StackParamList = {
  TheSource: { endpoint: string; type: string;};
  BenefitDetail: React.FC;
  ItineraryMain: {reFetch: boolean;};
  Today: React.FC;
};

const Stack = createStackNavigator<StackParamList>();

Puis quand l'utiliser:

const TheSourceRoute = (): React.ReactElement => {
  return (<StackNavigator id="TheSource" element={
    <Stack.Screen name="TheSource" component={WebviewModal} initialParams={{ endpoint: sourceUrl, type: 'directsource' }}
      options={{
        title: 'The Source',
      }}/>
  }/>
  );
};
0
William Bell