onMessage реквизиты не звонят в React Native Webview

Question

Привет, друзья! Я интегрирую веб-просмотр в собственное приложение «Реагировать», а ниже - мой код

 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>
    )
}

Когда я запускаю над кодом, у меня есть одно веб-представление и внутри этих двух кнопок, таких как Button1 и Button2. Когда я нажимаю кнопку Button1, должна быть напечатана в событии onMessage в webview, но это не печатается прямо сейчас, так что есть идеи, как я могу решить эту проблему?

Answer 1

Если вы получаете сообщение об ошибке: «Настройка onMessage в WebView переопределяет существующие значения window.postMessage, но предыдущее значение было определено».

Тогда решение состоит в том, чтобы добавить следующий код в ваши injectedJs.

      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;