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

【问题标题】：How to define React Navigation navigationOptions parameter in Typescript如何在 Typescript 中定义 React Navigation navigationOptions 参数
【发布时间】：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 中尝试了这种方法，但正如我在那里评论自己的那样，这对我来说效果不佳......

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

【问题讨论】：

标签： reactjs typescript react-native react-navigation

【解决方案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

});

【讨论】：