Question

当我单击标记以使其居中时，我试图更改MapView的坐标。这样，它可以正确显示标注。我正在尝试使用animateToCoordinate，但是什么也没有发生，并且该功能甚至都没有显示任何日志。

在包含标记的组件中，我具有以下内容：

class Place extends Component {
  fadeOut = () => {
    this._mapView.animateToCoordinate({
    latitude: 28.869236999,
    longitude: -81.234822999
   }, 2);
  }
  render() {
    return (
      <View>
        <Marker
          coordinate={{
            latitude: this.props.latitude,
            longitude: this.props.longitude
          }}
         onPress={() => this.fadeOut()}
        >
          <View onPress={() => this.fadeOut()}
            style={styles.markerWrap}>
            <View><Text style={styles.markerTitle}>{this.props.title}</Text></View>
            <View style={styles.marker} />
          </View>
          <Callout
            tooltip={true}
            style={styles.box}
          >
          <View style={styles.boxShadow}>
              <Text style={{ fontSize: 13, fontWeight: "600", marginBottom: 10}}>
                {this.props.title}
              </Text>
              <Text style={{ fontSize: 13, lineHeight: 18,}}>
                {this.props.description}
              </Text>
              <Button style={styles.button}>
                <Text style={styles.buttonText}>Se mer</Text>
              </Button>
          </View>
          </Callout>
        </Marker>

      </View>
    );
  }
}
export default Place;

我的app.js

<MapView
          style={styles.map}
          showUserLocation
          followUserLocation
          showsIndoors={false}
          showsTraffic={false}
          loadingEnabled={true}
          customMapStyle={MapStyle}
          region={this.getMapRegion()}
          provider="google"
          >
            <React.Fragment>
            <Place
              latitude={37.784362}
              longitude={-122.406872}
              title="Meny"
              description="Det er lett å lage gode kjøttfrie måltider. Her finner du både gode oppskrifter på vegetariske og veganske retter som passer til middag og lunsj, og hverdag og fest!"
            />
            <Place
              latitude={37.786562}
              longitude={-122.408872}
              title="Dwell"
              description="Det er lett å lage gode kjøttfrie måltider. Her finner du både gode oppskrifter på vegetariske og veganske retter som passer til middag og lunsj, og hverdag og fest!"
            />
            </React.Fragment>

      </MapView>

当前它不改变坐标，并显示如下：

还希望能够使用onDeselect来使标注动画化。

Answer 1

通过将其添加到来解决此问题：

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

并将其用作对这样的组件的支持：

map={this.map}

所以我可以这样使用它：

  fadeOut = () => {
    this.props.map.animateToCoordinate({
      latitude: this.props.latitude,
      longitude: this.props.longitude
    }, 5);
  }

如何在组件React Native Maps中使用onPress

1 个答案: