rn封装原生jsbridge与H5交互

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

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:注册

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值