El marcador hace clic en el evento al reactjsr maps nativos que no funcionan en react ios

Lo he intentado llamando al método onPress en la pestaña MapView.Marker, pero no funciona.

Este método para hacer clic en marcador de seguimiento:

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

En el método de representación, los componentes del Mapa se declaran para mostrar el map y los marcadores en el map. En el método onPress he llamado a mi método personalizado markerClicked (). Todavía no estoy obteniendo el resultado.

 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> ); } 

Solo necesita agregar <MapView.Callout> en la label <MapView.Marker> . Llamada personalizada: puede personalizar la window de información de marcador como su requisito.

He utilizado TouchableHighlight para marker info window click , para que pueda networkingirigir al usuario a otra pantalla onclick en la 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> 

Intente agregar una "key" en su marcador:

 {this.state.markers.map((marker, i) => ( <MapView.Marker key={i} coordinate={marker.coordinate} title={marker.title} description={marker.description} onPress={() => this.markerClick()} /> ))} 

Simplemente use 'i' para la testing, debe usar una identificación única

Para agregar a la respuesta de Anil, puede utilizar la callback 'onCalloutPress' en el Marcador para manejar el evento de prensa de llamada, de modo que no necesite un Toque de luz alto en la llamada:

 <MapView.Marker coordinate={marker.coordinate} title={marker.title} description={marker.description} onCalloutPress={this.markerClick}> <MapView.Callout tooltip style={styles.customView}> <View style={styles.calloutText}> <Text>{marker.title}{"\n"}{marker.description}</Text> </View> </MapView.Callout> </MapView.Marker>