[React] 웹뷰와 안드로이드 (Native) 간에 상호 통신하기

1. 웹뷰에서 Native 함수 실행하기

   

        webView.addJavascriptInterface(WebBridge(), "BRIDGE")

onCreate()에 addJavascriptInterface 메서드를 추가하여 웹뷰와 통신할 WebBridge 클래스를 생성해준다.

BRIDGE는 추후 나올 react에서 접근할때 사용할 식별자이다.

 

class WebBridge {
        @JavascriptInterface
        fun connectAndroid(): String {
            return token
        }
    }

WebBridge 클래스 안에 @JavascriptInterface를 추가하여 웹뷰와 안드로이드를 이어준다. 안에함수들은 자유롭게 작성해준다.

 

 

if (window.BRIDGE !== undefined) {
      window.sessionStorage.setItem("token", window.BRIDGE.connectAndroid());
      }

react에서 WebBridge클래스에 생성했던 함수를 호출하여 리턴값을 받아간다.

if문으로 감싸주어 연결된 식별자가 있는지 검사하여 모바일이 아닌 PC등 웹으로 접근했을때 오류를 방지 해준다.

 

 

2. Native에서 웹뷰에 있는 함수 실행하기

 

  webView.evaluateJavascript(
          "javascript:alert('test')"
        ) { value -> Log.d("test", "onReceiveValue: $value") }
    }

 

예시로 든 자바스크립트 함수는 실행되며, 사용자 정의 함수로 만들고 매개변수를 준뒤 return시키면 반환도 된다.

화살표 함수는 콜백 함수이며, 함수가 실행되었는지 불값으로 나타내준다.

이와 같이 evaluateJavascript 메소드를 이용하여 웹뷰에 있는 자바스크립트 함수를 실행시킨다