React Native WebView onMessage 没有做任何事情答案

【问题标题】：React Native WebView onMessage doesn't do anythingReact Native WebView onMessage 没有做任何事情
【发布时间】：2018-05-17 02:50:54
【问题描述】：

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

这里是 HTML

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

这里是 react-native 代码：

  <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

【问题讨论】：

标签： javascript html react-native webview

【解决方案1】：

根据this issue，你需要等到 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;

【讨论】：

难以置信！我花了几个小时试图弄清楚为什么我没有收到任何回复。 2019 年 5 月。 React native expo sdk 32.0.0 仍然是同样的愚蠢问题。关于“为什么”到“......替换本机功能”的问题仍然是完全有效的！

【解决方案2】：

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

window.postMessage(data, *) 已改为

window.ReactNativeWebView.postMessage(数据)

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

【讨论】：

这才是真正的答案。
这应该是正确答案。是的，问题是关于接收消息，但原因是因为postMessage 不起作用。

【解决方案3】：

对于仍然对此感到困惑的任何人...这是因为 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。

【讨论】：

【解决方案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

【讨论】：