如何在打字稿中使用react-navigation的withNavigation？

Question

我正在尝试使用react-native，react-navigation和Typescript一起创建一个应用程序。总共只有两个屏幕（HomeScreen和ConfigScreen）和一个组件（GoToConfigButton），如下所示。

主屏幕

import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";

export class HomeScreen extends React.Component<NavigationScreenProps> {
  render() {
    return (
      <View>
        <Text>Click the following button to go to the config tab.</Text>
        <GoToConfigButton/>
      </View>
    )
  }
}

GoToConfigButton

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<NavigationInjectedProps> {
  render() {
    return <Button onPress={this.handlePress} title="Go" />;
  }
  private handlePress = () => {
    this.props.navigation.navigate("Config");
  };
}
export default withNavigation(GoToConfigButton);

ConfigScreen未提供的代码，因为在这里不重要。好了，上面的代码实际上起作用了，我可以通过单击按钮转到配置屏幕。问题是，Typescript认为我应该手动提供该navigation属性GoToConfigButton。

<View>
  <Text>Click the following button to go to the config tab.</Text>
  <GoToConfigButton/>  <-- Property "navigation" is missing.
</View>

如何告诉Typescript该navigation属性是由自动赋予的react-navigation？

Answer 1

您只是缺少包装您的 NavigationInjectedProps 的 Partial<> 接口，正如修复此问题的拉取请求中所描述的那样。

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
    render() {
        return <Button onPress={this.handlePress} title="Go" />;
    }

    private handlePress = () => {
        this.props.navigation.navigate("Config");
    };
}

export default withNavigation(GoToConfigButton);

使用@types/react-navigation >= 2.13.0进行测试