如何使用 Typescript 在无状态组件上设置导航选项 [英] How to set navigationOptions on stateless component with Typescript

问题描述

我有一个像

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

使用 react-navigation 我通常会说

Using react-navigation I would normally apply navigation options by saying

Example.navigationOptions = { options };

打字稿出现错误

[ts] 类型 '(props: Props) => 上不存在属性 'navigationOptions'元素'.

我该如何解决这个问题?

How can I fix this?

我试着写一个界面

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

但没有运气.

推荐答案

关键思想是为 Example 常量指定正确的类型.可能 react-navigation 已经提供了这种类型.但是，你也可以像这样扩展内置的 React 接口:

The key idea is to specify correct type for Example constant. Probably, react-navigation already provides that type. But, you can also extend build-in React interface smth like this:

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

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

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

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

这篇关于如何使用 Typescript 在无状态组件上设置导航选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！