如何在 Typescript 中定义 React Navigation navigationOptions 参数

Posted 2023-03-13

【中文标题】如何在 Typescript 中定义 React Navigation navigationOptions 参数

【英文标题】：How to define React Navigation navigationOptions parameter in Typescript

【发布时间】：2018-10-24 05:42:20

【问题描述】：

在使用 React Navigation 的 React Native 应用程序中，我有一个屏幕组件，我想根据给定的参数使用 navigationOptions 属性在其中定义 title，如下所示：

static navigationOptions = (navigation) => (
    title: navigation.state.params.myParam
);

它工作正常，并且标题打印正确。 但是，现在我正在将应用程序迁移到 Typescript，并且我想将 myParam 定义为必需的字符串，但我不知道如何定义参数，所以我在我的 IDE 中获得了自动完成功能：

(navigation: /* WhatDoIPutHere? */)

我在this Gist 中尝试了这种方法，但正如我在那里评论自己的那样，这对我来说效果不佳......

我可以用什么类型来定义预期的参数？

【参考方案1】：

实际上我从问题中链接的the Gist 中的解决方案几乎是正确的-问题只是navigation.state.params 根据定义可能未定义！所以，Typescript 和我的 IDE（聪明人）都在抱怨它......

你可以从here的定义中看到相关位：

export interface NavigationLeafRoute<Params> 
  // ...
  /**
   * Params passed to this route when navigating to it,
   * e.g. ` car_id: 123 ` in a route that displays a car.
   */
  params?: Params;

所以我最终在我的组件中这样做了：

interface Params 
    myParam: string


// ...

static navigationOptions = (navigation: NavigationScreenProps<Params>) => (
    title: navigation.state.params ? navigation.state.params.myParam : 'Default title'
);

而且它工作得很好，包括我的 IDE 中的自动完成功能——开始非常喜欢 Typescript！

【讨论】：

如果您使用navigation.getParam()，它还提供类型检查。 （您只能使用 Params 界面中的属性键）

typescript 确实强迫您编写故障安全代码。

【参考方案2】：

我能够通过执行以下操作来使其工作：

import  NavigationScreenProp, NavigationRoute  from 'react-navigation';

interface Params 
  otherId: string;
  otherName: string;
  otherPic: string;
  id: string;


class MessengerContainer extends Component 
  static navigationOptions = ( navigation :  navigation: NavigationScreenProp<NavigationRoute<Params>, Params>) => (

// ... more code here

);