react native webview与H5通信

rn封装原生jsbridge与H5交互
rn webview问题
之前写过一篇封装原生webview的文章,rn封装原生jsbridge与H5交互
但是那只是android端的,不能应用iOS端,随着rn的发展,rn提供的webview也可以满足我们的开发需求,而且android&&ios 都可以统一处理,所以还是建议大家使用原生提供的组件,这里做简单的rn webview与H5相互通信的例子。
效果图:
react native webview与H5通信_第1张图片
react native webview与H5通信_第2张图片
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) => {
                    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 ;
                }}
            />

H5端:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text webviewtitle>
    <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>wuyunqiangh1>
<button onclick=clicktorn()>单击button>
body>
html>

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

你可能感兴趣的:(react-native)