javascript - 如何创建使用react-navigation泛型的新泛型对象类型？

Question

在我的 React Native 项目中，我有多个屏幕，我必须在每个屏幕上一遍又一遍地导入这些类型并设置为屏幕中的 props 类型。

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) {

可以更简化为这样吗？因此我只能导入一种类型

import ScreenPropsPatternType from '../references/types/screen-props-pattern'

function ChangeData({ navigation, route }: ScreenPropsPatternType<'ChangeData'>) {

Answer 1

React 导航库提供 a generic type already for this exact purpose :

Alternatively, you can also import a generic type to define types for both the navigation and route props from the corresponding navigator:

就您而言，它看起来像这样:

import { StackScreenProps } from '@react-navigation/stack';
import { NavigatorParameters } from '../references/types/navigators'

type PropsType = StackScreenProps<NavigatorParameters, 'ChangeData'>;

function ChangeData({ navigation, route }: PropsType) {

如果您想进一步简化它，您可以包装它并导出您自己的类型。请参阅Generic Object Types documentation有关其工作原理的更多详细信息。

import { StackScreenProps } from '@react-navigation/stack';
import { NavigatorParameters } from '../references/types/navigators'

export type ScreenPropsPatternType<K extends keyof NavigatorParameters> =
  StackScreenProps<NavigatorParameters, K>;

因此您可以在屏幕组件中轻松使用它。

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) {