React-Navigation 和 TypeScript。 属性 'getScreen' 类型缺失

Question

使用 TypeScript 和 react-navigation 会遇到以下 TypeScript 问题：

  Property 'Principles' is incompatible with index signature.
    Type '{ screen: (props: any) => Element; path: string; }' is not assignable to type 'NavigationRouteConfig'.
      Type '{ screen: (props: any) => Element; path: string; }' is not assignable to type '{ navigationOptions?: any; path?: string; } & { getScreen: () => NavigationComponent; }'.
        Type '{ screen: (props: any) => Element; path: string; }' is not assignable to type '{ getScreen: () => NavigationComponent; }'.
          Property 'getScreen' is missing in type '{ screen: (props: any) => Element; path: string; }'.

这是我的导航器中的代码：

const MainNavigator: NavigationContainer = StackNavigator({
    Principles: {
      screen: props => <WebViewModal source={{ uri: MY_URI }} {...props} />,
      path: 'principles',
    },
})

这就是WebViewModal的代码：

export interface IWebViewModalProps extends WebViewProperties, NavigationScreenProps {}

class WebViewModal extends Component<IWebViewModalProps> {
  closeModal = () => {
    this.props.navigation.goBack();
  };

  render() {
    const {...props } = this.props;
    return (
      <View style={styles.container}>
        <TopNavigationBar left={<Icon name="close" onPress={this.closeModal} />} />
        <WebView {...props} />
      </View>
    );
  }
}

export default WebViewModal;

我该如何解决这个打字稿问题？

Answer 1

查看 react-navigation 的 index.d.ts，我发现您可以执行以下操作：

Principles: {
  getScreen: () => props => <WebViewModal source={{ uri: MY_URI }} {...props} />,
  path: 'principles',
},

不过，我看到这个错误的时候也没有改代码就改掉了，只是简单的删除了node_modules and yarn.lock and 运行 再次安装纱线。