TSLint：属性 'params' 在类型 '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;
        ...
    }
}

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

Answer 1

像这样提取参数

const {params} = this.props.navigation.state;

const title = params.title

Answer 2

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

重新定义 navigation

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;

TSLint：属性 'params' 在类型 'NavigationState' 上不存在

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

typescript

react-native

react-navigation