React Native WebView onMessage 不执行任何操作

Question

我正在尝试使用 onMessage 侦听器。该网站正在执行一个 postMessage（ window.postMessage("Post message from web"); ）但是反应本机的 webview onMessage 监听器没有做任何事情！我不知道我做错了什么。

这是 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 反应本机功能：

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

这也是一个世博会小吃……我不知道我做错了（：…… https://snack.expo.io/S17AQqWbf

原文由 quiquelhappy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 传递以下道具：

 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(“Post message from web”, “*”) 。

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

原文由 colemerrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 这个问题，你需要等到 React Native postMessage 替换了原生的 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;

原文由 David Hellsing 发布，翻译遵循 CC BY-SA 3.0 许可协议