typescript - TSLint : Property 'params' does not exist on type 'NavigationState'

Question

我在 react-native 开发中使用 typescript。我通过 navigate 函数将参数传递给屏幕。

this.props.navigation.navigate("NextScreen", { title: "title" })

在 NextScreen 中，我通过 this.props.navigation.state.params.title 访问参数，但我得到 params 的 tslint 错误。

TS2339:Property 'params' does not exist on type 'NavigationState'.

这是一些代码。

import { NavigationInjectedProps } from "react-navigation";
interface OwnProps {
}
interface OwnState {
}

type Props = NavigationInjectedProps & OwnProps;

class NextScreen extends React.Component<Props, OwnState> {
    ...
    public render() {
        // tslint error occurs in this line.
        const { title } = this.props.navigation.state.params;
        ...
    }
}

我想我应该定义传递 Prop 的类型，但什么才是正确的方法？

Answer 1

我通过这种方式解决了，但我不确定这是否是最好的方式。研究原始代码，我重新定义navigation自定义类型 NavigationScreenProp<NavStateParams> .

import { NavigationInjectedProps, NavigationScreenProp, NavigationState } from "react-navigation";
...
interface ParamType {
  title: string;
}
interface StateParams extends NavigationState {
  params: ParamType;
}
interface OwnProps {
  navigation: NavigationScreenProp<StateParams>;
}

type Props = OwnProps & NavigationInjectedProps;