ReactNative WebView onMessage监听失败

阿不阿

已于 2022-03-12 18:13:28 修改

阅读量1k

点赞数 3

分类专栏： ReactNative 文章标签： webview react native android

于 2022-03-12 18:09:13 首次发布

本文链接：https://blog.csdn.net/eclothy/article/details/123447751

版权

ReactNative 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webview与RN通信，在html里发送通知：

window.postMessage(JSON.stringify({action: 0, data: data}));

发现RN的webview的onMessage监听不到，解决方案是为webview重写window.postMessage方法：

<WebView 
          style={{width:this.state.width, height:this.state.height}}
          ref = {(w) => {this.webview = w}}
          onLoad={this.webviewload.bind(this)}
          source={{html: html}}
          onMessage={this.messageHandler.bind(this)}
          //重写webview的postMessage方法，解决RN无法监听html自带的window.postMessage
          injectedJavaScript={`(function() {
            window.postMessage = function(data) {
              window.ReactNativeWebView.postMessage(data)
            }
            })();`
          }
</WebView>