En mi proyecto React Native tengo varias pantallas, cada pantalla que tengo que importar estos tipos y configurar es como tipo de accesorios en mi pantalla una y otra vez.
import { RouteProp } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import { NavigatorParameters } from '../references/types/navigators' type PropsType = { navigation: StackNavigationProp<NavigatorParameters, 'ChangeData'>, route: RouteProp<NavigatorParameters, 'ChangeData'> } function ChangeData({ navigation, route }: PropsType) {¿Se puede simplificar más así? Entonces, a partir de eso, solo puedo importar un solo tipo
import ScreenPropsPatternType from '../references/types/screen-props-pattern' function ChangeData({ navigation, route }: ScreenPropsPatternType<'ChangeData'>) {La biblioteca React Navigation ya ofrece un tipo genérico para este propósito exacto :
Alternativamente, también puede importar un tipo genérico para definir tipos para los accesorios de
navigationyroutedesde el navegador correspondiente:
En tu caso, se vería así:
import { StackScreenProps } from '@react-navigation/stack'; import { NavigatorParameters } from '../references/types/navigators' type PropsType = StackScreenProps<NavigatorParameters, 'ChangeData'>; function ChangeData({ navigation, route }: PropsType) {Si desea simplificar esto aún más, probablemente podría envolverlo y exportar su propio tipo. Consulte la documentación de tipos de objetos genéricos para obtener más detalles sobre cómo funciona.
import { StackScreenProps } from '@react-navigation/stack'; import { NavigatorParameters } from '../references/types/navigators' export type ScreenPropsPatternType<K extends keyof NavigatorParameters> = StackScreenProps<NavigatorParameters, K>;Por lo tanto, podrá usarlo fácilmente dentro de los componentes de la pantalla.
import { ScreenPropsPatternType } from '../references/types/screen-props-pattern'; type PropsType = ScreenPropsPatternType<'ChangeData'> & { // If you have any other custom props, this is totally optional. customProp: number; } function ChangeData({ navigation, route, customProp }: PropsType) {