时间戳

首页 > 解决方案 > React Native WebView 中的 Javascript console.log()

react-native - React Native WebView 中的 Javascript console.log()

问题描述

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

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

这是我最近的尝试：

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

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

任何帮助将不胜感激。

标签： react-native

解决方案

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

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 函数中获取控制台日志。

推荐阅读