RN 红屏报错：Setting onMessage on a WebView overrides existing values of window.postMessage

在App的WebView组件中嵌入h5页面时，总会红屏。查阅github上的issue后，发现只有规避这个报错信息能避免程序崩溃。

1  报错信息如下：

2 解决方案：在html页面中注入如下javascript代码可避免崩溃。

const patchPostMessageFunction = () => {

const originalPostMessage = window. postMessage;

const patchedPostMessage = ( message, targetOrigin, transfer) => {

originalPostMessage( message, targetOrigin, transfer);

};

patchedPostMessage. toString = () => String( Object. hasOwnProperty). replace( 'hasOwnProperty', 'postMessage');

window. postMessage = patchedPostMessage;

};

const patchPostMessageJsCode = `( ${ String( patchPostMessageFunction) } )();`;

render() {

return (

< WebView

bounces= {false}

onNavigationStateChange= {( navState) => this. onNavigationStateChange( navState) }

automaticallyAdjustContentInsets= {false}

scalesPageToFit= {false}

injectedJavaScript= { patchPostMessageJsCode }//注入js代码

onMessage= {( data) => this. onChangeData( data. nativeEvent. data) }//接受并处理html页面传过来的数据

source = { { uri: url }

/>

）;

}

注意：js代码注入的位置。当注入多个js代码时，上述js代码块前面已经有window.postmessage方法的调用，document.createEvent（）。具体为什么目前还不清楚。

上述js代码块，即

扫描二维码关注公众号，回复： 2405674 查看本文章

var originalPostMessage = window.postMessage;

var patchedPostMessage = (message, targetOrigin, transfer) => {

originalPostMessage(message, targetOrigin, transfer);

};

patchedPostMessage.toString = () => String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');

window.postMessage = patchedPostMessage;

//上述---避免崩溃的js代码

var evt = document.createEvent("HTMLEvents");

evt.initEvent("Name", false, false);

document.dispatchEvent(evt);