React Native中如何用TypeScript实现动态屏幕类型以消除冗余？

你可以通过TypeScript泛型封装通用的屏幕Props类型，只需要传入屏幕名称就能生成对应类型，彻底消除重复代码。

1. 定义通用泛型类型 #

将重复的类型结构封装成泛型，把固定的屏幕名称替换为泛型参数：

import { CompositeScreenProps, NativeStackScreenProps, DrawerScreenProps } from '@react-navigation/native';

// 封装带Drawer的Stack屏幕通用Props类型
type ScreenWithDrawerProps<S extends keyof HomeStackParamList> = CompositeScreenProps<
  NativeStackScreenProps<HomeStackParamList, S>,
  DrawerScreenProps<AppDrawerParamList>
>;

• 泛型参数S被约束为HomeStackParamList的键（即栈内所有合法屏幕名称），能自动校验传入的屏幕名，避免拼写错误。

2. 快速生成单屏幕Props #

之后每个屏幕的Props类型只需一行代码：

// 生成Landing屏幕的Props
type LandingProps = ScreenWithDrawerProps<"landing">;

// 其他屏幕示例
type ProfileProps = ScreenWithDrawerProps<"profile">;
type SettingsProps = ScreenWithDrawerProps<"settings">;

3. 进阶：适配多栈场景 #

如果应用存在多个不同的Stack，可以进一步扩展泛型，支持任意Stack的参数列表：

import { ParamListBase } from '@react-navigation/native';

// 通用适配：任意Stack + Drawer的屏幕Props类型
type GenericScreenWithDrawerProps<
  StackParamList extends ParamListBase,
  S extends keyof StackParamList
> = CompositeScreenProps<
  NativeStackScreenProps<StackParamList, S>,
  DrawerScreenProps<AppDrawerParamList>
>;

使用示例：

// Home栈的Landing屏幕
type LandingProps = GenericScreenWithDrawerProps<HomeStackParamList, "landing">;

// Settings栈的详情屏幕
type SettingsDetailProps = GenericScreenWithDrawerProps<SettingsStackParamList, "detail">;

组件中使用验证 #

在组件中使用生成的类型时，navigation和route会自动获得对应屏幕的类型提示：

const LandingScreen = ({ navigation, route }: LandingProps) => {
  // route.params会自动匹配HomeStackParamList中"landing"的参数类型
  return <View />;
};

内容的提问来源于stack exchange，提问作者Hammad Khan