React Native Webview 팝업

문제

  1. 기존 웹 페이지를 웹뷰로 App 내에서 나오게끔 하였으나 결제 모듈이 작동하지 않음
  2. 결제 모듈의 경우 새탭으로 띄워지기에 웹뷰에선 새로운 탭을 어떻게 처리할까? 고민중

해결방법 1. 이벤트를 상속 받자 (실패)

WebView 가 실행전에 아래 코드를 실행시켜 스택을 관리했다.
그러면 이 방식을 통해 새로운 탭이 켜진다 라는걸 인식하면 안될까?

const INJECTED_CODE = `
(function() {
  function wrap(fn) {
    return function wrapper() {
      var res = fn.apply(this, arguments);
      window.ReactNativeWebView.postMessage('navigationStateChange');
      return res;
    }
  }

  history.pushState = wrap(history.pushState);
  history.replaceState = wrap(history.replaceState);
  window.addEventListener('popstate', function() {
    window.ReactNativeWebView.postMessage('navigationStateChange');
  });
   
})();

true;
`;

해결방법 2. 웹뷰도 브라우저처럼 여러탭이 되지 않을까? ( 실패 -> 성공! )

관련 속성을 열어줬으나 실패 가 아니라 성공!
setSupportMultipleWindows={false} 를 통해 팝업창 열수 있도록 작업 하니 다행이 화면이 떳다!

참고
https://mikelim.mintocean.com/entry/Android-Webview%EC%97%90%EC%84%9C-%EC%83%88%EB%A1%9C%EC%9A%B4-%EC%B0%BD%EC%9D%84-%EC%97%B4%EB%95%8C

좋은 웹페이지 즐겨찾기