rn封装原生jsbridge与H5交互

本文介绍了如何在react-native项目中封装原生jsbridge,以便于rn webview与H5进行通信。首先,按照指定GitHub仓库配置jsbridge,然后创建WebViewManager并实现相关方法,包括设置webview属性和回调。接着,详细讲解了rn调用封装好的webview组件的过程,以及在实际使用中需要注意的属性变化和事件注册问题。提供了相关代码参考链接。

react native webview与H5通信
rn webview问题

一:首先按照https://github.com/lzyzsd/JsBridge配置jsbridge
二:封装jsbridge给rn调用
1:新建WebViewManager继承自SimpleViewManager
2:实现createViewInstance方法 返回一个webview实例

   @Override
    protected BridgeWebView createViewInstance(final ThemedReactContext reactContext) {
        this.reactContext=reactContext;
        webView =  new BridgeWebView(reactContext);
   //注册登录事件registerHandler
   webView.registerHandler("callNativePage", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {

            }
        });
        return webView;
    }

3:设置webview属性接口

   @ReactProp(name = "url")
    public void setUrl(final BridgeWebView webView,String url) {//这里setText应该高亮
        webView.loadUrl(url);
    }

4:设置webview给rn的回调方法
我这里设置的是login方法 点击h5页面判断是否登录 如果没有登录跳转到登录页面
实现方法:
1:注册事件给rn调用

  @javax.annotation.Nullable
    @Override
    public Map getExportedCustomDirectEventTypeConstants() {
        //第一个Login 注册的名字  第二个registrationName不可以改变 第三个js回调方法
        return MapBuilder.of("Login",MapBuilder.of("registrationName","onLogin"));
    }

2:点击H5发送事件,改变registerHander方法

    webView.registerHandler("callNativePage", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG, "js调用原生 " + data);
                if(WebViewManager.this.token!=null){
                    Log.i(TAG, "token 不为空 " + data);
                    function.onCallBack("回传给js的数据: "+WebViewManager.this.token);
                    Toast.makeText(reactContext,"token 不为空 " + data,Toast.LENGTH_LONG).show();
                }else{
                    Log.i(TAG, "到登陆页面 " + data);
                    WritableMap params = Arguments.createMap();
                    params.putString("from","native");
                    WebViewManager.this.dispatchEvent(reactContext,"Login",params);//发送事件给RN
                }
            }
        });

    private void dispatchEvent(ReactContext reactContext,
                           String eventName,
                           @Nullable WritableMap params) {
        if (reactContext==null) {
            Log.i(TAG, "reactContext==null");
        }else{
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                    this.webView.getId(),//实例的ID native和js两个视图会依据getId()而关联在一起
                    eventName,//事件名称
                    params
            );
        }
    }

3:在application里面注册

   @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> modules = new ArrayList<>();
        modules.add(new WebViewManager());
        return modules;
    }

三:rn调用封装的webview
1:引入

var WebViewNative = requireNativeComponent('WebViewManager', H5WebView);

封装好的组件
2:

  render() {
        return (<View style={{flex:1}}>
            <TouchableOpacity activeOpacity={0.8} onPress={this.start}>
            <View style={{width:WIDTH,height:50, justifyContent:'center', alignItems:'center'}}>
                <Text>主动去掉用H5</Text>
            </View>
            </TouchableOpacity>
            <WebViewNative
                ref={(c) => {this.WebViewNative = c;}}
                style={{flex:1}}
                url="xxx"
                token = {this.state.AndroidToken}
                onLogin = {this.toLogin}
                postMsg={this.state.msg}/>
        </View>)
    }

WebViewNative.propTypes = {
    ...View.propTypes,
    url: PropTypes.string,
    token:PropTypes.string,
    onLogin:PropTypes.func,//封装的事件回调
};

tip:
1:再给原生传递属性时只有属性值变化才会从新绘制原生界面,如果只是在rn setState而没有引起属性值变化时是不会调用原生属性方法的。
2:设置原生事件给rn调用时getId 为组件的ID 。
代码比较简单参考:https://github.com/wuyunqiang/RNApp

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值