React Native WebView onMessage 没有做任何事情

Posted 2023-02-22

【中文标题】React Native WebView onMessage 没有做任何事情

【英文标题】：React Native WebView onMessage doesn't do anything

【发布时间】：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

【参考方案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