反应导航：如何在打字稿中使用 NavigationStackScreenComponent 类型传递 redux 道具

Posted 2023-03-13

【中文标题】反应导航：如何在打字稿中使用 NavigationStackScreenComponent 类型传递 redux 道具

【英文标题】：react navigation: how to pass redux props with NavigationStackScreenComponent type in typescript

【发布时间】：2020-05-13 21:48:41

【问题描述】：

我开始在我的 react native 项目（typescript 新手）中使用 typescript，并在使用 typescript 的功能组件中遇到了 navigationOptions 问题，感谢这篇文章 here 我解决了这个问题，但是当我尝试传递 redux 道具时它告诉我

Property 'authType' does not exist on type 'PropsWithChildren<NavigationStackScreenProps<Params, Props>>

这是我的代码

interface Props 
 authType: string;


interface Params 
 routeName: string;


const Customer: NavigationStackScreenComponent<Params, Props> = (
 navigation,
 authType,
 ) => 
 .... Component
 

 Customer.navigationOptions = ( navigation ) => (
   title: navigation.getParam('routeName'),
 );

我认为这意味着我正在传递的道具没有被读取，尽管我正在传递它。

我使用 NavigationStackScreenComponent 是为了能够使用

Customer.navigationOptions etc

否则它会告诉我

ts] Property 'navigationOptions' does not exist

我真的开始爱上打字稿了，知道如何使用 authType Props 而不会让我尖叫吗？

【参考方案1】：

我最终这样做了

type Params = 
  routeName: string;
;

type Props = 
  authType?: string;
  navigation: NavigationStackProp;
;

const Customer: NavigationStackScreenComponent<Params> = (
  authType,
  navigation,
: Props) => 

我只是将传递道具设为可选。

【参考方案2】：

你需要做类似的事情

interface Props 
 authType: string;


type CustomerType = React.ComponentType<Props & NavigationStackScreenProps> &  navigationOptions: NavigationStackOptions | ((props: NavigationStackScreenProps) => NavigationStackOptions) 

const Customer: CustomerType = (
 navigation,
 authType,
) => 
 .... Component

【讨论】：

它有效，但我们又回到了原点告诉我Property 'navigationOptions' does not exist on type 'FunctionComponent<Props & NavigationStackScreenProps<Params, unknown>>'