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

【问题标题】：How to create a new generic object type that uses react-navigation's generics?如何创建使用 react-navigation 泛型的新泛型对象类型？
【发布时间】：2021-10-10 01:17:28
【问题描述】：

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

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

【问题讨论】：

你试过了吗？发生了什么？
很遗憾我还没有尝试过，不知道从哪里开始或什么关键字

标签： javascript reactjs typescript react-native types

【解决方案1】：

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

或者，您也可以导入泛型类型来定义类型来自相应导航器的 navigation 和 route 属性：

在你的情况下，它看起来像这样：

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

【讨论】：