React-native-webview 에서 pg사 외부 앱 실행 질문 드립니다

안녕하세요.

react-native-cli로 프로젝트를 진행하고 있습니다.

WebView로 사이트 이동 후 pg사 외부 앱 실행이 되지 않아 질문드립니다.

pg사 외부 앱 실행을 하려고 결제 버튼을 클릭할 때 아래와 같은 에러가 나타납니다.

우선 제가 시도했었던 것과 질문들을 적어보았습니다.

외부 앱을 실행시키는데 도움이 필요합니다!

  1. info.plist에 LSApplicationQueriesSchemes에 아래와 같이 리스트를 추가시켜 놓았습니다.
<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kftc-bankpay</string> <!-- 계좌이체 -->
    <string>ispmobile</string> <!-- ISP모바일 -->
    <string>itms-apps</string> <!-- 앱스토어 -->
    <string>hdcardappcardansimclick</string> <!-- 현대카드-앱카드 -->
    <string>smhyundaiansimclick</string> <!-- 현대카드-공인인증서 -->
    <string>shinhan-sr-ansimclick</string> <!-- 신한카드-앱카드 -->
    <string>smshinhanansimclick</string> <!-- 신한카드-공인인증서 -->
    <string>kb-acp</string> <!-- 국민카드-앱카드 -->
    <string>mpocket.online.ansimclick</string> <!-- 삼성카드-앱카드 -->
    <string>ansimclickscard</string> <!-- 삼성카드-온라인결제 -->
    <string>ansimclickipcollect</string> <!-- 삼성카드-온라인결제 -->
    <string>vguardstart</string> <!-- 삼성카드-백신 -->
    <string>samsungpay</string> <!-- 삼성카드-삼성페이 -->
    <string>scardcertiapp</string> <!-- 삼성카드-공인인증서 -->
    <string>lottesmartpay</string> <!-- 롯데카드-모바일결제 -->
    <string>lotteappcard</string> <!-- 롯데카드-앱카드 -->
    <string>cloudpay</string> <!-- 하나카드-앱카드 -->
    <string>nhappcardansimclick</string> <!-- 농협카드-앱카드 -->
    <string>nonghyupcardansimclick</string> <!-- 농협카드-공인인증서 -->
    <string>citispay</string> <!-- 씨티카드-앱카드 -->
    <string>citicardappkr</string> <!-- 씨티카드-공인인증서 -->
    <string>citimobileapp</string> <!-- 씨티카드-간편결제 -->
     <string>kakaotalk</string> <!-- 카카오톡 -->
    <string>payco</string> <!-- 페이코 -->
    <string>lpayapp</string> <!-- 롯데 L페이 -->
    <string>hanamopmoasign</string> <!-- 하나카드 공인인증앱 -->
    <string>wooripay</string> <!-- 우리페이 -->
    <string>nhallonepayansimclick</string> <!-- NH 올원페이 -->
    <string>hanawalletmembers</string> <!-- 하나카드(하나멤버스 월렛) -->
	</array>
  1. originWhitelist={['*']} , onShouldStartLoadWithRequest 를 true 또는 false로 리턴할 수 있다고 하는데
    onShouldStartLoadWithRequest={false} 외에 onShouldStartLoadWithRequest={() => { return false}}이런 식으로 작성하면 작동하지 않습니다… 이 부분은 왜 그런지 이해가 안가네요 …;; 뭐가 문제일까요?

  2. https://stackoverflow.com/questions/34200362/openurl-is-not-working-for-system-schemes-on-ios-9?fbclid=IwAR0KxvQPHGNqZRwuW_7gIk7mbMz1iHipcW5fjHi1Hudmaax3hmd70ebNd4w 링크를 참고해보면

NSURL *testURL = [NSURL URLWithString:@"http://www.apple.com"];

if ([[UIApplication sharedApplication] canOpenURL:testURL]) {

   NSLog(@"canOpenURL");

   [[UIApplication sharedApplication] openURL:testURL];
}

위와 같은 소스를 어딘가에 추가해 줘야 하는 것 같은데 어느 부분에 추가해 주어야 하는지 모르겠습니다. (object-c 대해 잘 모릅니다…)

도움주시면 감사하겠습니다!

Linking 을 사용하시면 됩니다.
아래 예제 참고해주세요~

import {Linking} from 'react-native';

...

<WebView
  ...
  originWhitelist={['*']}
  onShouldStartLoadWithRequest={(e) => {
    if (e.url.startsWith('kb-acp://')) {
      Linking.openURL(e.url);
      return false;
    }
    return true;
  }}
/>
좋아요 1

혹시 ios는 설정은 어떻게 하셨나요?
저는 info.plist 파일에 LSApplicationQueriesSchemes 에 소스를 추가하고 Linking.openURL(evt.url).catch(err => { Toast.show('앱 실행에 실패했습니다. 설치가 되어있지 않은 경우 설치하기 버튼을 눌러주세요.'); }); 를 사용했을 때 Unable to open URL 에러가 나타나서요 ㅠㅠ

어떤 문제인지 잘 모르겠네요.

Linking.openURL('fb://app');

실행해보시면 페이스북 앱이 실행되는걸 확인할 수 있습니다.

info.plist에 LSApplicationQueriesSchemes에 추가만 하시고 Linking.openURL('fb://app'); 만 사용하신 게 맞을까요? 저는 계속 Unable to open URL 에러가 나타나는데 혹시 따로 설정을 해야 하나 해서요