TypeScript 属性“导航”在类型中缺失,但在类型“Props”React Native 中需要

Awa*_*ine 5 javascript typescript reactjs react-native

在 React Native 应用程序中,我知道当您将 RootNavigator 传递到 createAppContainer 并导出它时,导航prop将在所有子组件中隐式可用。

export default createAppContainer(AppNavigator);
Run Code Online (Sandbox Code Playgroud)

我有这个组件,应该使用导航道具导航到另一个屏幕。我为这个组件的 props 定义了一个接口,如下所示:

ComponentA 的 props 接口:

interface Props {
  count: number;
  navigation: NavigationStackProp<{quizId: number}>;
}
Run Code Online (Sandbox Code Playgroud)

现在我像这样渲染 ComponentA:

...
render() {
    return (
        <ComponentA count={0} /> // TypeScript screams here that I am not passing the navigation props
    );
}
Run Code Online (Sandbox Code Playgroud)

如果我像这样通过 ComponentA 传递导航属性:

<ComponentA count={0} navigation={props.navigation} />
Run Code Online (Sandbox Code Playgroud)

TypeScript 很满意。

因此,我的问题是,我是否必须像这样显式传递导航属性?我感觉不太对劲。有没有办法可以在这种特殊情况下抑制 TypeScript 警告。

我是 TypeScript 新手,所以这可能是一件微不足道的事情,但我将不胜感激任何帮助。

谢谢

Siv*_*K V 5

您可以通过以下方式使用可选道具?

interface Props {
  count: number;
  navigation?: NavigationStackProp<{quizId: number}>;
}
Run Code Online (Sandbox Code Playgroud)