概要
先日【ReactNative】react-native-mapsを導入するという記事を書いて、react-native-maps
を導入しました。
そこでちょっとハマった事象があるので紹介します。
簡単に言うと、Map
コンポーネントにonPress
で地図を押下した際のイベントを指定した上で、Map
上にMarker
を配置し、こちらにもonPress
を指定している場合に、Marker
をタップしてonPress
を発火させるとMap
のonPress
も同時に発火してしまうというものです。
TestMap.tsx
import React from 'react';
import { Alert } from 'react-native'
import MapView, { Region, Marker, LatLng } from 'react-native-maps';
render(){
// 初期表示位置
const initialRegion : Region = {
latitude : 35.689521,
longitude : 139.691704,
latitudeDelta : 0.0460,
longitudeDelta : 0.0260,
}
// マーカーの表示位置
const coordinate : LatLng = {
latitude : 35.689421,
longitude :139.691604
}
<MapView initialRegion={initialRegion} onPress={()=> { Alert.alert("マップを押したよ") }} >
<Marker coordinate={coordinate} onPress={()=>{ Alert.alert("マーカーを押したよ") }} />
</MapView>
}
バージョン情報
"react-native": "0.61.5",
"react-native-maps": "^0.26.1",
"native-base": "^2.13.8",
対処法
Marker
のonPress
にMapEvent
型の引数を指定してstopPropagation()
を実行します。
これによりMarker
→Map
へのイベントの伝播が止まります。
<Marker coordinate={coordinate} onPress={(e : MapEvent) => {
// マップにonPressイベントが伝播するのを止める
e.stopPropagation();
Alert.alert("マーカーを押したよ")
}} />
おわりに
react-native-maps
を使っていて、マップをタップしてマーカーを置き、マーカーをタップした時に何かをするというのはよくあるパターンだと思います。
一度対応を覚えればなんてことない内容なのですが、備忘として残しておきます。