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

Question

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

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

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

({navigation}: /* WhatDoIPutHere? */)

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

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

Answer 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!