React Native Maps上的Marker Click事件在React iOS中不起作用

Question

我已经尝试通过在MapView.Marker选项卡中调用onPress方法，但是它不起作用。

这种跟踪标记点击的方法：

markerClick(){
      console.log("Marker was clicked");
 }

在render方法中，声明了Map组件以在地图上显示地图和标记。在onPress方法中，我调用了自定义方法markerClicked（）。仍然我没有得到结果。

render() {
        return (

          <View style={styles.container}>
            <MapView style={styles.map}
              initialRegion={{
                  latitude: 37.78825,
                  longitude: -122.4324,
                  latitudeDelta: 0.0,
                  longitudeDelta: 0.0,
              }}
            >
            {this.state.markers.map(marker => (
              <MapView.Marker
                coordinate={marker.coordinate}
                title={marker.title}
                description={marker.description}
                onPress={() => this.markerClick()}
              />
            ))}
          </MapView>
        </View>
      );
  }

Answer 1

你只需要添加<MapView.Callout>的<MapView.Marker>标签。自定义标注-您可以根据需要自定义标记信息点击窗口。

我已经习惯TouchableHighlight了marker info window click，这样您就可以在单击时将用户重定向到其他屏幕custom callout。

<View style={styles.mainContainer}>
                  <MapView style={styles.map}
                          initialRegion={{
                              latitude: 37.78825,
                              longitude: -122.4324,
                              latitudeDelta: 0.0,
                              longitudeDelta: 0.0,
                            }}>
                            {this.state.markers.map((marker) => (
                              <MapView.Marker
                                coordinate={marker.coordinate}
                                title={marker.title}
                                description={marker.description}>
                                  <MapView.Callout tooltip style={styles.customView}>
                                      <TouchableHighlight onPress= {()=>this.markerClick()} underlayColor='#dddddd'>
                                          <View style={styles.calloutText}>
                                              <Text>{marker.title}{"\n"}{marker.description}</Text>
                                          </View>
                                      </TouchableHighlight>
                                    </MapView.Callout>
                                </MapView.Marker>
                            ))}
                     </MapView>
                  </View>