React组件中使用JSBridge

看了很多文章 目前很少有关于这部分的,主要是一搜索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添加到全局变量中:

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));

以上.