如何在React Navigation的Stack路由中定义路由参数类型

你只需要给你的Stack导航器绑定全局的路由参数类型映射，就能在配置<Stack.Screen>的时候直接获得类型校验，无需仅在组件内部定义。

步骤1：定义路由参数映射表 #

首先把你的Stack导航下所有页面的参数类型统一定义：

// 先定义MarketAssetDetailsPage的入参类型
type MarketAssetDetailsParams = {
  routeName: string;
  data: {
    assetColor: string;
    // 按需补充data下的其他字段类型
  };
};

// 全局Stack路由参数映射，所有页面的参数类型都在这里声明
type RootStackParamList = {
  // 其他无参数的页面可以写成 页面名: undefined
  MarketAssetDetailsPage: MarketAssetDetailsParams;
};

步骤2：给Stack实例绑定类型 #

在创建Stack导航器的时候传入上面定义的映射表作为泛型参数，这样所有Stack.Screen的配置都会自动继承类型：

import { createStackNavigator } from '@react-navigation/stack';

// 绑定泛型后整个Stack的路由配置都会有类型校验
const Stack = createStackNavigator<RootStackParamList>();

完成以上两步后你原有代码里的route.params就会自动识别出routeName和data字段，不会再报类型错误。

临时单独标注方案 #

如果你不想全局绑定Stack的类型，也可以单独给当前Screen的options参数做类型标注：

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

// 复用上面定义的两个类型
type MarketAssetDetailsRouteProp = RouteProp<RootStackParamList, 'MarketAssetDetailsPage'>;

<Stack.Screen
    name="MarketAssetDetailsPage"
    options={({ route }: { route: MarketAssetDetailsRouteProp }) =>
      HeaderWithBackTitle({
        title: `${route.params.routeName} Market Details`,
        bgColor: route.params.data.assetColor,
        textColor: 'white',
      })
    }
    component={MarketAssetDetailsPage}
  />

内容的提问来源于stack exchange，提问作者İlker