React Native Webview 팝업

Gavri·2022년 3월 17일
1

ReactNative

목록 보기
2/2

문제

  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

profile
모든건 기록으로

2개의 댓글

comment-user-thumbnail
2023년 3월 12일

안녕하세요! react-native-webview로 개발하면서 팝업 관련 기능 구현하다가 게시글 보게 되었습니다. 궁금한 것이 있는데요setSupportMultipleWindows={false} -> 부분 true로 설정해줘야 하는 것이 아닌가요? 또 해당 옵션은 android에 한정하여 동작하는 것 같은데, ios에서는 어떻게 처리를 하셨는지가 궁금합니다!

감사합니다, 좋은 하루 되세요!

1개의 답글

관련 채용 정보