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代码块，即
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);