未触发 React Native WebView onMessage()

Posted 2023-05-09

【中文标题】未触发 React Native WebView onMessage()

【英文标题】：React Native WebView onMessage() is not triggered

【发布时间】：2021-09-27 18:31:52

【问题描述】：

我在 S3 上托管了一个静态站点，上面有 CloudFront 发行版。

<WebView
  ref=webViewRef
  scrollEnabled=false
  source= uri: Config.REMOTE_URL  // CloudFront URL
  sharedCookiesEnabled=true
  onMessage=(event) => receivedMessageFromWebView(event.nativeEvent.data)
/>

我们postMessage() 上网的方式是这样的

const sendDataToWebView = (dataMap: any) => 
  const dataToPost =  type: 'data', data: dataMap ;
  const postMessageJSCode = `
    window.postMessage($JSON.stringify(dataToPost), "*");
    true;
  `;
  if (webViewRef && webViewRef.current) 
    webViewRef.current.injectjavascript(postMessageJSCode);
  

而onMessage的实现如下

const receivedMessageFromWebView = (msgData: any) => 
  console.log('Data Received from WebView -->', msgData); // <-- Not working
;

我在这里错过了什么？

反应：17.0.2 ReactNative：0.64.2 Web 视图：11.6.5

【参考方案1】：

而不是window.postMessage试试window.ReactNativeWebView.postMessage

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onmessage

或者文档已经是本地和 webview 之间通信的详细信息：https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native