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和yarn.lock并再次运行 yarn install 。

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

1 个答案: