react-native-webview 和H5之间的交互最新总结

爬了N个坑,终于打通了react-native-webview和H5之间的数据交互:

RN发送数据给H5:

<Button style={styles.buttonStyle} title='发送消息' onPress={this._sendMessage}/>

_sendMessage = () => { 

   let data = {"type":"friends"};

 if (this.webview) {

console.log('------->jsonStr'+JSON.stringify(data));

this.webview.postMessage(JSON.stringify(data));

}}

问题在于H5端接收数据问题:

//注册事件 接收数据(这里网上很多写成window.document,并不能监听到方法)

window.addEventListener('message', function(e) {

const message = e.data;//字符串类型

  console.log('WebView message:',message);

// alert(message);

})


H5数据传递给RN:

网上到处都是使用

window.postMessage('*****')方法,但是RN端并不能接收到数据

最终进到https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

才发现是这么写才有效:

window.ReactNativeWebView.postMessage(str);

最终只需要在RN端配置WebView的onMessage方法即可:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容