Как украсить типобезопасный компонент с помощью Navigation

Question

У меня есть компонент React, который использует withNavigation decorator.

import * as React from 'react';
import { Text, View } from 'react-native';
import { withNavigation } from 'react-navigation';

@withNavigation
export default class Foo extends React.Component {
  public render() {
    return (<View><Text>test</Text></View>);
  }
}

Я получаю сообщение об ошибке:

Error:(5, 2) TS2345: Argument of type 'typeof Foo' is not assignable to parameter of type 'ComponentType<NavigationInjectedProps>'.
  Type 'typeof Foo' is not assignable to type 'StatelessComponent<NavigationInjectedProps>'.
    Type 'typeof Foo' provides no match for the signature '(props: NavigationInjectedProps & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

Полагаю, мне следует указать какой-то интерфейс для реквизита компонента, но мне сложно интерпретировать эту ошибку.

Какой интерфейс должен иметь компонент?

Answer 1

import { NavigationInjectedProps, withNavigation } from 'react-navigation'

type FooOwnProps = {}

@withNavigation
class Foo extends React.Component<FooOwnProps & NavigationInjectedProps> { ... }

Answer 2

Я думаю, что это должно быть:

class Foo extends React.Component {
    render() {
      return (<View><Text>test</Text></View>);
  }
}
export default withNavigation(Foo);

Я почти уверен, что withNavigation не является декоратором, а render - не публичный метод