React-native Webview 페이지의 "alert", "confirm" 창 타이틀 수정

본 글에사 사용된 Source Code의 정보는 다음과 같습니다.

$ node --version
v14.15.1

$ npm --version
6.14.8

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.63.4

$ react-native-webview --version
^11.0.2

 

React-native를 사용해 하이브리드 앱을 제작할 때, 웹 페이지 내부에서 자바스크립트 기본 alert 이나 confirm을 사용할 때가 있다. 물론 React-native에서 Bridge를 사용하여 React-native에서 제공되는 Alert이나 Confirm을 사용할 수는 있으나 기존에 서비스 되고있는 페이지의 특성상 앱과 웹의 통신이 불가할 때, 자바스크립트의 기본 alert이나 confirm을 수정할 필요가 있을 경우 사용된다.

 

자바스크립트의 기본 alert이나 confirm을 사용하게 되면 다음과 같이 타이틀 영역에 해당 페이지의 도메인이 표시되는걸 확인 할 수 있다.

 

안드로이드 디바이스에서 기본적으로 보이는 alert, confirm의 제목

페이지의 URL 대신 특정 문구로 타이틀을 표시하고 싶다면 "react-native-webview"의 "RNWebViewManager.java" 파일을 수정하면 된다.

RNWebViewManager.java 파일의 위치

해당 파일을 열어 아래의 코드 블럭을 찾고.

protected void setupWebChromeClient(ReactContext reactContext, WebView webView) {
	
    ...
    
}

위의 코드 내부에 다음의 코드를 추가 시키면 된다.

webView.setWebChromeClient(new WebChromeClient() {
  @Override
  public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
    new AlertDialog.Builder(reactContext)
      .setTitle("Alert 타이틀")
      .setMessage(message)
      .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
          result.confirm();
        }
      }).setCancelable(false).create().show();
    return true;
  }

  @Override
  public boolean onJsConfirm(WebView view, String url, String message, final android.webkit.JsResult result) {
    new AlertDialog.Builder(reactContext)
      .setTitle("Confirm 타이틀")
      .setMessage(message)
      .setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int which) {
          result.confirm();
        }
      })
      .setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int which) {
          result.cancel();
        }
      })
      .create()
      .show();

    return true;
  }
});

 

위의 코드를 적용후 앱을 다시 실행하면 다음과 같이 타이틀 영역이 바뀐것을 확인할 수 있다.

변경된 alert, confirm의 타이틀

 

이는 React-native에서 Dialog Plugin을 사용할 수 없을 경우에 사용하면 보다 깔끔하게 alert과 confirm을 사용할 수 있다.