onMessage 道具未在 React Native webview 中调用答案

【问题标题】：onMessage props not calling in React Native webviewonMessage 道具未在 React Native webview 中调用
【发布时间】：2018-05-01 09:25:18
【问题描述】：

你好朋友，我将 webview 集成到 react native 应用程序中，下面是我的代码

 render() {


const injectedJs = `

var elements = document.querySelectorAll("input[type=submit]");

  elements[0].addEventListener("click", function() {
    window.postMessage("Button1");
  });

  elements[1].addEventListener("click", function() {
    window.postMessage("Button2");
  });


`;

    return (
        <View style={{ flex: 1 }}>
        <WebView
                source={{ uri: this.state.authURL }}
                bounces={true}
                style={{flex: 1}}
                injectedJavaScript={injectedJs}
                startInLoadingState
                scalesPageToFit
                javaScriptEnabledAndroid={true}
                javaScriptEnabled={true}
                onNavigationStateChange={this.handleNavigationStateChange}
                onMessage={event => {
                    console.log("MESSAGE IN ONMESSAGE" + event.nativeEvent.data);


                }}
                onLoadStart={() => {
                    console.log("LOAD START ");
                }}
                onLoadEnd={() => {
                    console.log('LOAD END');
                }}
                onError={err => {
                    console.log('ERROR ');
                    console.log(err);
                }}
            />
        </View>
    )
}

当我运行上面的代码时，我有一个 web 视图，并且在这两个按钮内，如 Button1 和 Button2。当我单击 Button1 时，应该在 webview 的 onMessage 事件中打印，但现在不打印，所以知道如何解决这个问题吗？

【问题讨论】：

您是否收到此错误：“在 WebView 上设置 onMessage 会覆盖 window.postMessage 的现有值，但之前的值已定义。” ?

标签： reactjs react-native webview

【解决方案1】：

如果您收到错误：“在 WebView 上设置 onMessage 会覆盖 window.postMessage 的现有值，但之前的值已定义。”

那么解决办法就是在你的injectJs中添加如下代码。

      var originalPostMessage = window.postMessage;
      var patchedPostMessage = function(message, targetOrigin, transfer) {
        originalPostMessage(message, targetOrigin, transfer);
      };

      patchedPostMessage.toString = function() {
        return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
      };

      window.postMessage = patchedPostMessage;

【讨论】：