React Native WebView 中的 Javascript console.log() [英] Javascript console.log() in a React Native WebView

问题描述

我的 React Native 应用程序中有一个 WebView，我需要显示在我的 React Native 应用程序内的 WebView 中执行的 Javascript 的日志.

I have a WebView in my React Native app, and I need to show the logs from the Javascript that is executed within the WebView inside my React Native app.

我认为我需要使用 WebView 的 nativeConfig 道具来实现这一点，但我不知道如何使其工作.

I think that I need to play around with WebView's nativeConfig prop to achieve this, but I don't know how to make it work.

这是我最近的尝试:

 <WebView
    nativeConfig={{
      props: {
        webContentsDebuggingEnabled: true,
        console: new MyLogger()
      }
    }}
   ...

class MyLogger {
  log = message => {
    console.log(message); // Print in RN logs for now...
  };   
} 

任何帮助将不胜感激.

推荐答案

好吧，我终于想通了.我只需要向 WebView 注入一些代码，并让它使用我自己的控制台版本.

Ok I figured it out after all. I just need to inject some code to the WebView, and have it use my own version of console.

const debugging = `
     // Debug
     console = new Object();
     console.log = function(log) {
       window.webViewBridge.send("console", log);
     };
     console.debug = console.log;
     console.info = console.log;
     console.warn = console.log;
     console.error = console.log;
     `;


<WebView
  injectedJavaScript={debugging}
  onMessage={this.onMessage}

然后我在 onMessage 函数中获取控制台日志.

I then get the console logs inside the onMessage function.

这篇关于React Native WebView 中的 Javascript console.log()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！