看了很多文章 目前很少有關于這部分的,主要是一搜索React Android 就是關于React Native的, 所以有必要記錄一下, 也不知道用的是否是對的, 但是調通了

前端

React(16.8.6) + TypeScript(3.3.3) + JsBridge(1.0.4)
JsBridge
https://github.com/lzyzsd/JsBridge

index.html

把下面代碼添加到入口文件index.html中,最后的window.bridge是把bridge添加到全局變量中:

 <script type="text/javascript">
/*這段代碼是固定的，必須要放到js中*/
function connectWebViewJavascriptBridge(callback) {
  //Android使用
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady'
      , function () {
        callback(WebViewJavascriptBridge)
      },
      false
    );
  }
  //iOS使用
  if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
  if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//在該function 中添加原生調起js方法
connectWebViewJavascriptBridge(function (bridge) {
  bridge.init(function (message, responseCallback) {
    console.log('JS got a message', message);
    responseCallback(data);
  });
  window.bridge = bridge
}) </script>

Component中使用:

先聲明一個全局變量:

declare global {
    interface Window {
      bridge:any
    }
}

使用:

  調用Native的方法"callNativeMethod"
     window.bridge.callHandler('callNativeMethod','data',function(resp:any){
            console.log('from native to js')
        })
  注冊方法"getUserInfos" (由Native調用, 會回調到這里)
     window.bridge.registerHandler("getUserInfos",function(data:any,responseCallback:any){
            console.log('getUserInfos is called')
            responseCallback('js callback to java');
          });

Native實現

webview替換為BridgeWebView

注冊handler

 webView.registerHandler(
            "callNativeMethod",
            new BridgeHandler() {
                @Override
                public void handler(String data, CallBackFunction function) {
                    Log.d(TAG, "handler = addDrugReminder, data from web = " + data);
                    function.onCallBack("submitFromWeb exe, response data from Java");
                }
            });

Android調用JS

webView.callHandler(
            "getUserInfos",
            ("userInfo"), new CallBackFunction() {
                @Override
                public void onCallBack(String data) {
                    Log.d(TAG, "onCallBack: "+data);
                }
            });

聲明Client

class MyWebViewClient extends BridgeWebViewClient {

    public MyWebViewClient(BridgeWebView webView) {
        super(webView);
    }
}

設置

webView.setWebViewClient(new MyWebViewClient(webView));

以上.