Как определить параметр React Navigation navigationOptions в Typescript

Question

В приложении React Native, использующем React Navigation, у меня есть компонент экрана, где я хочу определить title, используя свойство navigationOptions на основе заданных параметров, например:

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

Он работает нормально, и заголовок напечатан правильно.
Однако сейчас я переносю приложение в Typescript и хочу определить myParam в качестве обязательной строки, и я не знаю, как определитьпараметр, поэтому я получаю автодополнение в своей IDE:

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

Я попробовал подход в этом Gist , но, как я прокомментировал себя там, это не работает нормально для меня ...

Какой правильный тип я могу использовать для определения ожидаемых параметров там?

Answer 1

Мне удалось заставить это работать следующим образом:

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

});

Answer 2

На самом деле решение в Суть , на которую я ссылался из вопроса, почти правильное - проблема просто в navigation.state.params может быть неопределенной согласно определению!Итак, Typescript и моя IDE (умные парни) жаловались на это ...

Вы можете увидеть соответствующий бит из определений здесь :

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!