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

Answer 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;

Answer 2

这解决了我的问题。

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

Answer 3

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

window.postMessage（data，*）已更改为

window.ReactNativeWebView.postMessage（data）

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

Answer 4

对于仍然对此感到困惑的任何人...这是因为React Native和Webview之间的通信已被完全重写。是的，window.postMessage（data，*）已更改为window.ReactNativeWebView.postMessage（data），但要专门回答此问题，解决方案是按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（“从网络发布消息”，“ *”）。

React Native WebView onMessage没有做任何事情

4 个答案: