【ReactNative】react-native-maps 응용편 ②"표시된 onPress 이벤트와 지도의 onPress 이벤트"

개시하다

react-native-maps의 응용편 제2탄.
뒤의 번호는 아래와 같다.
https://zenn.dev/nekoniki/articles/0c40e9267b81e4
https://zenn.dev/nekoniki/articles/1be7f07be211d8
이번에 react-native-maps에서 기호를 사용한 상황에서 당한 경우.

견본

예를 들어 다음과 같은 경우Map와 Marker는 각각 onPress 이벤트를 설정했다.
Test.tsx

import React from 'react';
import { Alert } from 'react-native'
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

const Test: React.FC = () => {
    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }
    
    return(){
      <MapView initialRegion={initialRegion} onPress={()=> { Alert.alert("マップを押したよ") }} >
          <Marker coordinate={coordinate} onPress={()=>{ Alert.alert("マーカーを押したよ") }} />
      </MapView>
    }
}

지도의 상황과 기호의 상황에 따라 각각 다른 처리를 하려고 했지만, 이 쓰기 기호를 눌렀을 때'지도를 눌렀을 때의 사건도 함께 집행한다'는 것이 만들어졌다.HTML + JS 세계에서 말하는 이본도 바레인이 발생하고 있는 상태.

처리 방법은 stop Propotion()을 사용합니다.

이는 react-native-maps라기보다는 react-native 각 부품의 규격이며, 당연히 충전을 멈추는 수단도 마련됐다.onPress의 경우 매개 변수로 눌렀을 때의 이벤트는 매개 변수MapEvent형으로 할 수 있기 때문에 실행stopPropagation()한다.

<Marker coordinate={coordinate} onPress={(e : MapEvent) => {
            // マップにonPressイベントが伝播するのを止める 
            e.stopPropagation();
            Alert.alert("マーカーを押したよ")
        }} />

이렇게 하면 표시를 눌렀을 때 상급 요소라고 불리는 지도onPress를 방지할 수 있다.

총결산

이번에 react-native-maps에서 자주 사용하는 지도 표지onPress 활동의 혼합과 대응 방법을 소개했다.
흔히 볼 수 있는 것은'지도를 클릭한 위치에 표시를 놓는다'와'표시를 클릭할 때 처리한다'는 응용이다.
이 경우 이번 예와 같이 두 곳에 설치onPress해 활동해야 하기 때문에 후진에 주의할 필요가 있다.
기본은 여기까지지만 의외로 잊어버리기 쉬우니 주의해야 한다.