Question

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

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了很多！

Answer 2

通过执行以下操作，我可以使它起作用：

height: 50%

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

2 个答案: