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

【问题标题】：How to use onPress in component React Native Maps如何在组件 React Native Maps 中使用 onPress
【发布时间】：2018-09-22 19:16:44
【问题描述】：

我试图在单击标记时更改 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 使标注动画。

【问题讨论】：

我没有看到你将 this._mapView 设置为 mapView 的参考代码
@skyboyer 我该怎么做？
我尝试了fadeOut = () => { this.props.map.animateToCoordinate({ latitude: 28.869236999, longitude: -81.234822999 }, 2); } 并将ref={ map => { this.map = map }}添加到
我在代码中没有看到这个。没有 ref 它绝对不应该工作。所以更新你的代码，让我们看看是否还有其他问题。

标签： javascript reactjs react-native react-native-maps

【解决方案1】：

通过添加这个来解决这个问题：

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

并将其用作组件的道具，如下所示：

map={this.map}

所以我可以这样使用它：

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

【讨论】：