在 React Native 中使用 Stack Navigator 时，为 'navigation' 对象定义类型的更好方法

Question

我在使用 react-navigation 时遇到了道具类型模块化的问题。

我的问题是： The React Navigation doc Typescript section 建议像这样为每个屏幕道具创建类型：

//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 中的另一个页面定义道具类型，例如主页页面，我将不得不重复相同的两种类型的导入，据我所知，这并不理想。

所有改变的只是传递给类型的字符串（'Profile'、'Home' 等）。

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

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

我是 TS 的初学者，所以我的问题是：如何创建一个通用类型来帮助我避免在每个页面上使用相同的两个导入？由于这两种道具类型之间唯一发生变化的是字符串。

Answer 1

你可以将RootStackParamList抽象出来放到一个单独的文件中。并导出如下通用类型：

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

并像这样使用它：

type HomeProps = RootStackProps<'Home'>;

在 React Native 中使用 Stack Navigator 时，为 'navigation' 对象定义类型的更好方法

Better way of defining types for 'navigation' object, when using Stack Navigator in React Native

modularization

typescript

reactjs

react-native

react-navigation