react native 原生webview与H5通信

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

iosrnapp.gif

androidgif.gif

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
    };
           {
                    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端：

    
    
    
    


wuyunqiang
单击

代码：https://github.com/wuyunqiang/RNApp