[Android & React] 웹뷰(react)에서 안드로이드 함수 사용하기, 안드로이드에서 웹뷰(react) 함수 사용하기

1. 웹뷰(WebView)에서 안드로이드 함수 사용하기

onCreate() 함수에 JavascriptInterface 추가하기

mWebView.addJavascriptInterface(new WebBridge(), "BRIDGE");

WebBridge는 웹뷰와 통신할 직접 만든 클래스입니다.
"BRIDGE"는 웹뷰와 안드로이드를 이어주는 string입니다. 자신이 설정해서 사용하시면 됩니다.

Bridge Class 만들기

webView에서 사용할 함수를 모두 생성합니다.

class WebBridge {
    @JavascriptInterface
    public void testAndroid() {
        // 실행할 내용
    }
}

react에서 실행하기

react에서 WebBridge에서 생성했던 함수를 호출합니다. 리턴값도 받을 수 있습니다.

window.BRIDGE.testAndroid();

BRIDGE : 안드로이드에서 설정한 string
testAndroid() : 안드로이드 함수

2. 안드로이드에서 웹뷰(WebView) 함수 사용하기

react에서 이벤트 생성

저는 componentDidMount에서 리스너를 등록하였습니다. "android"란 이벤트는 안드로이드에서 생성할 것입니다.

componentDidMount() {
    window.addEventListener("android", async (e) => {
        console.log(e.detail);
    });
}

안드로이드에서 호출

안드로이드에서 evaluateJavascript라는 함수를 통해 이벤트를 생성할 것입니다. 그냥 이벤트만 생성했을 때 되지 않아서 CustomEvent를 통해 이벤트를 생성하였습니다. 그리고 저는 데이터도 함께 전송해야 했기 때문에 detail를 이용해서 전송하였습니다.

이벤트를 생성했으면 dispatchEvent 함수를 실행해줍니다.

디스패치를 하게 되면 위에서 등록했던 리스너가 동작할 것입니다.

webView.evaluateJavascript(
            "var event = new CustomEvent(\"android\", {\n" +
                "    detail: \n" +
                "        " + result + "\n" +
                "    \n" +
                "});\n" +
                "window.dispatchEvent(event);\n"
        , new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        Log.d(TAG, "onReceiveValue: " + value);
                    }
                });

CustomEvent에 대한 내용은 아래 내용을 참고하시면 됩니다.

https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent

var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);