Как установить navigationOptions для компонента без состояния с помощью Typcript

У меня есть реагирующий компонент, например

const Example = () => (<View>...</View>);

Используя интерактивную навигацию, я обычно применяю варианты навигации, говоря:

Example.navigationOptions = { options };

С машинописью я получаю ошибку

[ts] Property 'navigationOptions' does not exist on type '(props: Props) => Element'.

Как я могу это исправить?

Я попытался написать интерфейс

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

Но не повезло.

Ответы

Ответ 1

Основная идея - указать правильный тип для константы Example. Вероятно, react-navigation уже предоставляет этот тип. Но вы также можете расширить встроенный интерфейс React smth следующим образом:

    interface NavStatelessComponent extends React.StatelessComponent {
        navigationOptions?: Object
    }

    const Example: NavStatelessComponent = () => {
        return (
            <View>
               ...
            </View>
        )
    }

    Example.navigationOptions = {
        /*
        ...
        */
    }

    Example.propTypes = {
        /*
        ...
        */
    }

Ответ 2

Вы можете использовать следующее:

import {
  NavigationScreenProps,
  NavigationScreenComponent
} from 'react-navigation'

interface Props extends NavigationScreenProps {
  // ... other props
}

const MyScreen: NavigationScreenComponent<Props> = ({ navigation }) => {
  // ... your component
}

MyScreen.navigationOptions = {
  // ... your navigation options
}

export default MyScreen

Ответ 3

Если дело в том, что вам нужна одинаковая опция навигации для всех ваших компонентов, помните, что вы можете установить defaultNavigationOptions в createStackNavigator. Вот React Navigation API, если вам нужен пример.

Ответ 4

Для react-navigation v4, где у вас есть react-navigation-tabs и react-navigation-stack как отдельные библиотеки, вам нужно сделать что-то похожее на ответ Sat Mandir Khalsa, но вам просто нужно использовать правильные типы из правильных библиотека. Например, если это экран из createStackNavigator, вам нужно сделать:

import {
  NavigationStackScreenComponent,
  NavigationStackScreenProps
} from 'react-navigation-stack'

interface Props extends NavigationStackScreenProps {
  // your props...
}

export const HomeScreen: NavigationStackScreenComponent<Props> = ({ navigation }) => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  )
}

HomeScreen.navigationOptions = {
  // your options...
}

Аналогично, библиотека react-navigation-tabs имеет такие типы, как NavigationBottomTabScreenComponent и NavigationTabScreenProps, которые вы можете использовать вместо этого.