反応しているネイティブマップのマーカークリックイベントが反応しない

Question

MapView.MarkerタブでonPressメソッドを呼び出そうとしましたが、機能しません。

マーカーのクリックを追跡するためのこの方法は：

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

でrenderメソッドを、マップコンポーネントは、地図上の地図と マーカーを表示するように宣言されています。 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>タグ。 カスタム吹き出し - マーカー情報のクリックウィンドウをカスタマイズすることができます。

marker info window clickにはTouchableHighlightが使用されていますので、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> 

Answer 2

あなたのマーカーに "キー" を追加しよう：

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

'i' はテストのためだけに使用、あなたは一意のIDに

Answer 3

、あなたは吹き出し内TouchableHighlightを必要としないように、コールアウトのプレスイベントを処理するためのマーカーを「onCalloutPress」コールバックを使用することができます。

<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> 

Answer 4

<MapView.Marker key={index} coordinate={marker.coordinate} 
    title={marker.title} 
    description={marker.description} 
    onPress={e => this.onPressMarker(e,index)} 
>