멋쟁이 코딩 클럽

목표

위치 (좌표 or 텍스트)를 가지고 지도 아이콘을 클릭을 통해 지도앱 내 길찾기 화면으로 연결

문제

canOpenUrl() 이 안 먹음

원인은

Android 보안 feature 로 새로 추가된 Package Visibility 때문. 이는 iOS의 LSApplicationQuriesSchemes와 비슷

https://stackoverflow.com/questions/64699801/linking-canopenurl-returning-false-when-targeting-android-30-sdk-on-react-native

해결법

은 확인 url scheme의 패키지를 등록해두는 것

아래는 구글지도, 네이버지도, 카카오맵을 등록

// AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <queries>
        <package android:name="com.google.android.apps.maps" />
        <package android:name="com.nhn.android.nmap" />
        <package android:name="net.daum.android.map" />
    </queries>
    ...

성공적인 코드 작성 : 카카오맵 (예)

// 주어진 위치를 가지고 , 카카오맵의 설치 여부를 확인 후 앱으로 연결하는 로직 
// (미설치 시 플레이스토어로 연결)

const kakaoMapURL = `kakaomap://search?q=${where}`
const kakaoSupported = await Linking.canOpenURL("kakaomap://open");
const playStoreKakaoURL = 'market://details?id=net.daum.android.map';

if (kakaoSupported) {
  Linking.openURL(kakaoMapURL);
} else {
  Linking.openURL(playStoreKakaoURL);
}

한 술 더 떠

나는 지도앱 모두에 대해 ‘연결 프로그램’을 통해 선택 ⇒ 키워드로 검색 까지 진행하고 싶었음

https://medium.com/prnd/%EB%94%A5%EB%A7%81%ED%81%AC%EC%9D%98-%EB%AA%A8%EB%93%A0%EA%B2%83-feat-app-link-universal-link-deferred-deeplink-61d6cf63a0a5

https://medium.com/prnd/딥링크의-모든것-feat-app-link-universal-link-deferred-deeplink-61d6cf63a0a5

위 글을 읽던 중 ‘연결 프로그램’ 을 통해 깔린 지도앱들을 선택할 수 있는 기능에 대한 실마리를 얻음

딥링크(DEEP LINK)란?

모바일 앱이나 웹사이트 내의 특정 화면이나 콘텐츠로 직접 연결되는 링크
딥링크의 종류

종류	설명
기본 딥링크	URL로 앱이 설치되어 있으면 앱을 열고, 없으면 웹페이지를 여는 방식(`https://example.com/product/123`)
커스텀 스킴 딥링크	앱 전용 URL 스킴을 사용하는 방식 (`myapp://product/123`)
유니버설 링크 (iOS) / 앱 링크 (Android)	앱이 설치되어 있으면 앱이 실행되고, 없으면 브라우저로 이동. 보안과 호환성 강화된 방식

즉, 내가 쓸 건 유니버설링크/앱 링크

참고 : ‘널리 알려진 스킴들’

sms:// <- 문자

tel:// <- 전화

mailto:// <- 메일

geo:// <- 위치/지도

market:// <- 앱마켓

코드 작성 예시.

// 위도 경도도 알 때
const scheme = Platform.select({ ios: 'maps://0,0?q=', android: 'geo:0,0?q=' });
const latLng = `${lat},${lng}`;
const url = Platform.select({
  ios: `${scheme}${fullAddress}@${latLng}`,
  android: `${scheme}${latLng}(${fullAddress})`
});

Linking.openURL(url);

// 위치명만 알 때
const url = Platform.select({
  ios: `maps:0,0?q=${fullAddress}`,
  android: `geo:0,0?q=${fullAddress}`,
})

Linking.openURL(url)