未觸發 React Native WebView onMessage()

Question

我在 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
• 反應原生：0.64.2
• 網絡視圖：11.6.5

Answer 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 和本機