react native webview与H5通信

rn封装原生jsbridge与H5交互
 rn webview问题
之前写过一篇封装原生webview的文章，rn封装原生jsbridge与H5交互
但是那只是android端的，不能应用iOS端，随着rn的发展，rn提供的webview也可以满足我们的开发需求，而且android&&ios 都可以统一处理，所以还是建议大家使用原生提供的组件，这里做简单的rn webview与H5相互通信的例子。
效果图：

rn端：

    //接收来自H5的消息
    onMessage = (e)=>{
        Log('WebView onMessage 收到H5参数：',e.nativeEvent.data);
        let params = e.nativeEvent.data;
        params = JSON.parse(params);
        Log('WebView onMessage 收到H5参数 json后：',params);
    };

   onLoadEnd =(e)=>{
        Log('WebView onLoadEnd e：',e.nativeEvent);
        let data = {
            source:'from rn',
        };
        this.web&&this.web.postMessage(JSON.stringify(data));//发送消息到H5
    };
          <WebView
                ref={(webview) => {
                    this.web = webview
                }}
                style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}
                source={require('../data/testwebview.html')}
                onLoadEnd={this.onLoadEnd}//加载成功或者失败都会回调
                onMessage={this.onMessage}
                javaScriptEnabled={true}//指定WebView中是否启用JavaScript
                startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
                renderError={(e) => {
                    return <View/>;
                }}
            />

H5端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text webview</title>
    <script type="application/javascript">
        //相互通信只能传递字符串类型
        function clicktorn() { //发送消息到rn
            let params = {
               msg:'h5 to rn',
                source:'H5',
            };
            window.postMessage(JSON.stringify(params));//发送消息到rn
        }

        window.document.addEventListener('message', function(e) {//注册事件 接收数据
            const message = e.data;//字符串类型
            console.log('WebView message:',message);
            window.postMessage(message);
        })
    </script>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            background: #ccc;
        }
        h1{
            padding:45px;
            margin:0;
            text-align: center;
            color:#0000ff;
        }
    </style>
</head>
<body>
<h1>wuyunqiang</h1>
<button onclick=clicktorn()>单击</button>
</body>
</html>

代码：https://github.com/wuyunqiang/RNApp
更多关于rn webview问题可以参考：https://github.com/wuyunqiang/ReactNativeUtil/issues

react native webview与H5通信

猜你喜欢