React Native WebView onMessage 不做任何事情

Question

我正在尝试使用onMessage侦听器。该网站正在执行一个帖子消息(window.postMessage("Post message from web");)，但对消息侦听器上的本机网络视图做出反应！我不知道我做错了什么。

这是 HTML

<script type="text/javascript">
window.postMessage("Post message from web");
</script>

这是反应原生代码：

<WebView
ref={( webView ) => this.webView = webView}
onMessage={this.onMessage}
source={{uri: 'https://app.sodge.co/login/response.html'}}
/>

onMessage react 本机函数：

onMessage( event ) {
Alert.alert(
'On Message',
event.nativeEvent.data,
[
{text: 'OK'},
],
{ cancelable: true }
)
}

这里也有世博会小吃...我不知道我做错了(：... https://snack.expo.io/S17AQqWbf

Answer 1

对于仍然对此感到困惑的人... 这是因为 React Native 和 Webview 之间的通信已被完全重写。 是的，window.postMessage(data， *) 已更改为 window。ReactNativeWebView.postMessage(data)，但要具体回答这个问题，解决方案，即从你的Web视图支持window.postMessage所需要的，是每 https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0 传递以下prop：

const injectedJavascript = `(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()`
<WebView
injectedJavaScript={injectedJavascript}
ref={( webView ) => this.webView = webView}
onMessage={this.onMessage}
source={{uri: 'https://app.sodge.co/login/response.html'}}
/>

然后，您可以像往常一样在脚本标记(或其他任何地方)中调用window.postMessage("从web发布消息"，"*")。

更新：上面的答案只支持Android上的window.postMessage的旧功能 - 文档中没有提到的东西。 对于 iOS，只需使用库，https://github.com/CharlesStover/react-native-web-view。 像往常一样包含 Web 视图 - 没有注入的 JavaScript。 iOS 不支持在本机和 Web 视图之间注入消息或注入的 JavaScript。 有关更多信息，并了解解决此问题的黑客，请查看 https://medium.com/@Charles_Stover/fixing-react-native-webviews-postmessage-for-ios-10e2320b2f14。

Answer 2

根据这个问题，你需要等到 React NativepostMessage替换了原生window.postMessage(不要问我为什么他们要替换原生函数而不是创建一个新函数)。

一种解决方案是执行以下操作：

function waitForBridge() {
//the react native postMessage has only 1 parameter
//while the default one has 2, so check the signature
//of the function
if (window.postMessage.length !== 1){
setTimeout(waitForBridge, 200);
}
else {
window.postMessage('abc');
}
}
window.onload = waitForBridge;

Answer 3

如果你在像我这样的v5.0.0之后使用react-native-webview，请使用window.ReactNativeWebView.postMessage(data)！

window.postMessage(data， *) 已更改为

窗。ReactNativeWebView.postMessage(data)

https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0

Answer 4

这解决了我的问题。

let postMessage = window.parent.postMessage;
if(window.ReactNativeWebView) {
postMessage = window.ReactNativeWebView.postMessage;
}
postMessage('hey');

https://github.com/react-native-community/react-native-webview/issues/323#issuecomment-511824940

Answer 5

对我来说，解决方案是使用injectedJavaScriptBeforeContentLoadedprop 而不是如下所示injectedJavaScript覆盖window.postMessage函数。

const injectedJavaScript = `
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(JSON.stringify(data));
}
`