reactjs 在React Native中使用堆栈导航器时,定义“navigation”对象类型的更好方法

hrirmatl  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(133)

我在使用React导航时遇到了一些 prop 类型模块化的问题。
我的问题是:The React Navigation doc Typescript section建议为每个屏幕 prop 创建如下类型:

//types.ts
export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

// Profile.tsx
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { RootStackParamList } from  './types';

type ProfileProps = NativeStackScreenProps<RootStackParamList, 'Profile'>;

因此,基本上,导入 * NativeStackScreenProps * 类型,并将 * RootStackParamList * 和页面名称作为字符串传递。
但如果我必须为同一个Stack中的另一个页面定义prop类型,例如 * Home * 页面,我将不得不重复相同的两个类型导入,据我所知,这并不理想。
所更改的只是传入类型的字符串("Profile"、"Home"等)。

// Home.tsx
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { RootStackParamList } from './types';

type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;

我是TS的初学者,所以我的问题是:我怎样才能创建一个泛型类型来帮助我避免在每个页面上使用相同的两个导入呢?因为这两个prop类型之间唯一的变化是一个字符串。

23c0lvtd

23c0lvtd1#

您可以抽象RootStackParamList并将其放在一个单独的文件中,然后导出一个泛型类型,如下所示:

export type RootStackProps<T extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, T>;

并像这样使用它:

type HomeProps = RootStackProps<'Home'>;

相关问题