属性 'map' 在类型 'MapView' 上不存在

Question

我正在使用 typescript 和 react-native-maps 创建一个 react-native 应用程序。我正在关注他们给出的示例之一 here。

在尝试调用方法之前，我必须创建一个 ref，如示例中所示，但出现以下错误。

"Property 'map' does not exist on type 'Map'"

这是我的代码。

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";

export default class Map extends Component {
  constructor(props: any) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE
      }
    };
  }

  render() {
    return (
      <MapView
        // Getting that error in this line
        ref={map => { this.map = map; }}
        style={{ flex: 1 }}
        region={this.state["region"]}
      >
        <Marker coordinate={this.state["coordinate"]} />
      </MapView>
    );
  }
}

我尝试了一些给出的解决方案但我怀疑它不是 react-native 的解决方案？

Answer 1

这只是意味着它无法在名为 "map" 的组件上找到现有的属性。因此，您只需在构造函数上方添加一个初始空值属性即可消除错误，如下所示：

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";

export default class Map extends Component {

  map: MapView // just add this to remove the error

  constructor(props: any) {
    super(props);

    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE
      }
    };
  }

  render() {
    return (
      <MapView
        // Getting that error in this line
        ref={map => { this.map = map; }}
        style={{ flex: 1 }}
        region={this.state["region"]}
      >
        <Marker coordinate={this.state["coordinate"]} />
      </MapView>
    );
  }
}

Answer 2

试试这个：

ref={(ref) => this.map = ref}

属性 'map' 在类型 'MapView' 上不存在

Property 'map' does not exist on type 'MapView'

typescript

reactjs

react-native

react-native-maps