如何使用 Typescript 在无状态组件上设置 navigationOptions答案

【问题标题】：How to set navigationOptions on stateless component with Typescript如何使用 Typescript 在无状态组件上设置 navigationOptions
【发布时间】：2018-08-13 12:06:30
【问题描述】：

我有一个类似的反应组件

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

使用 react-navigation 我通常会通过说来应用导航选项

Example.navigationOptions = { options };

使用打字稿我收到错误

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

我该如何解决这个问题？

我试着写一个界面

interface ExampleWithNavigationOptions extends Element {
    navigationOptions?;
}

但没有运气。

【问题讨论】：

标签： reactjs typescript react-native react-navigation

【解决方案1】：

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

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

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

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

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

【讨论】：

将navigationOptions定义为对象的要点是什么...类型的要点是要知道这是为了什么
这不是一个好的答案。它建议您创建一个不需要的自己的类型。请查看 Sat Mandir Khalsa 的回答，了解正确的方法。
这里很多不好的做法，不用return就可以return() => (<View....)
这不是一个有效的答案。 Typescript 用于处理不绕过或绕过它们的类型。我很惊讶有这么多人赞成这个答案。它甚至被接受了。

【解决方案2】：

如果您希望所有组件都使用相同的导航选项，请记住您可以在createStackNavigator 中设置defaultNavigationOptions。如果您需要示例，这里是React Navigation API。

【讨论】：

【解决方案3】：

您可以使用以下内容：

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

【讨论】：

这应该是公认的答案。公认的方法是与 TypeScript 对抗而不是拥抱它的甜蜜。
如果您想在键入navigationOptions 时自动完成，您可以将导航选项对象转换为NavigationScreenOptions，可以从react-navigation 导入（即MyScreen.navigationOptions = {} as NavigationScreenOptions）
最佳答案，您的界面将继承无状态的导航类型，github.com/react-navigation/react-navigation/blob/…
NavigationScreenProps 似乎不再存在。这对我有用：NavigationScreenComponent< OwnProps, NavigationBottomTabScreenComponent >

【解决方案4】：

对于react-navigation v4，您将react-navigation-tabs 和react-navigation-stack 作为单独的库，您需要执行类似于Sat Mandir Khalsa's answer 的操作，但您只需要使用正确库中的正确类型。例如，如果是来自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 等类型，您可以使用它们。

【讨论】：