처음으로 만들어 본 하이브리드 앱.. 난 리액트뷰를 만들고 있고 대체 내 함수를 어떻게 네이티브로 전달해야할지.. 또 네이티브 함수는 대체 어떻게 사용해야할지 답답해서 열심히 서치를 해 보았다.

방법은 너무나도 많았다..
근데 안드로이드나 ios 개발은 내가 하는게 아니고 담당자가 있으니 둘이 말을 맞춰야하는데.. 서로 몰랐다...ㅋㅋㅋㅋㅋㅋ
삽질 열심히 하다가.. 우여곡절 끝에 드디어...! 서로의 함수를 가져다 사용할 수 있게 되었다ㅠㅠ!!

하이브리드 앱 인터페이스

javascript -> android

android에서 javascript 함수 호출

• react

  const helloWorld = () => {
      // your javascript code
  },

• android

  webView.evaluateJavascript("window.helloWorld()")
  // or
  webView.loadUrl("javascript:window.helloWorld()")

javascript -> ios

ios에서 javascript 함수 호출

• react

  const helloWorld = () => {
      // your javascript code
  },

• ios

  webView.evaluateJavascript("javascript:window.NativeInterface.helloWorld()") { (result, error) in }

android -> javascript

javascript에서 android 함수 호출

• react

  window.InterfaceName.showToast("Hello Android")

• android
  웹에서 호출하기 위한 함수는 반드시 @JavascriptInterface 어노테이션을 붙여준다.

  class JSInterface(private val context: Context) {
      @JavascriptInterface
      fun showToast(message: String) {
          // your native code
          Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
      }
      ...
  }

  위에서 만든 클래스를 webview에 연동한다.

  webView.addJavascriptInterface(JSInterface(applicationContext), "InterfaceName")

ios -> javascript

javascript에서 ios 함수 호출

• react

  window.webkit.messageHandlers.interfaceName1.postMessage("params")

• ios
  ios는 내가 잘 몰라서 소스만 우선 가져와본다..

  let controller = WKUserContentController()
  controller.add(self, name: "interfaceName1")

  let config = WKWebViewConfiguration()
  config.userContentController = controller
  webView = WKWebView(frame: view.bounds, configuration: config)

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      if (message.name == "interfaceName1") {
         // your native code
      } else if ...
  }

  흑흑 이게 맞는 방법인지는 좀 더 찾아봐야겠지만 우선 동작했다는것에 감격스럽다!╰(°▽°)╯