react native 路由组件（prop）类型定义

一路向阳~负责的男人

已于 2023-02-16 15:39:23 修改

阅读量232

点赞数

文章标签： react native react.js javascript

于 2023-02-16 15:28:24 首次发布

本文链接：https://blog.csdn.net/weixin_43416349/article/details/129063071

版权

文章介绍了如何在ReactNative中使用`@react-navigation/native`库，特别是定义一个类型`FcWithRoute`，它结合了`Route`、`NavigationProp`和函数组件的props。`FcWithRoute`用于确保组件接收到正确的导航和路由信息，如`RouteName`（路由名）、`Params`（传递的参数）和`ComponentProps`（组件自身的props）。示例展示了如何为特定路由定义带参数的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Route, NavigationProp } from '@react-navigation/native';
import { FC } from 'react';

/**
 * @description 必须要传递RouteName
 * 当该组件是路由组件时， 使用该类型声明
 * @param RouteName 路由名字
 * @param Params 跳转路由时，传递的参数类型
 * @param ComponentProps 通常用不上，给函数组件传递的props
 */
export type FcWithRoute<
  RouteName extends string,
  Params extends object = {},
  ComponentProps extends { [key: string]: any } = {},
> = FC<
  ComponentProps & {
    navigation: NavigationProp<{ [key: string]: any }, RouteName>;
    route: Route<RouteName, Params>;
  }
>;

// 使用
type Parmas = {
  id: number;
};

const RequirePriceOrder: FcRoute<'RequirePriceOrder', Parmas> = props => {
  const {
    route: {
      params: { id: askPurchaseId },
    },
  } = props;