React Native WebView 中的 Javascript console.log()

Question

我的 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...
  };   
} 

任何帮助将不胜感激。

Answer 1

好吧，我终于想通了。我只需要向 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 函数中获取控制台日志。

Answer 2

如果您使用的是 Webview v5 或更高版本，则可以使用类似于以下内容的内容：

const debugging = `
  const consoleLog = (type, log) => window.ReactNativeWebView.postMessage(JSON.stringify({'type': 'Console', 'data': {'type': type, 'log': log}}));
  console = {
      log: (log) => consoleLog('log', log),
      debug: (log) => consoleLog('debug', log),
      info: (log) => consoleLog('info', log),
      warn: (log) => consoleLog('warn', log),
      error: (log) => consoleLog('error', log),
    };
`;

const onMessage = (payload) => {
  let dataPayload;
  try {
    dataPayload = JSON.parse(payload.nativeEvent.data);
  } catch (e) {}

  if (dataPayload) {
    if (dataPayload.type === 'Console') {
      console.info(`[Console] ${JSON.stringify(dataPayload.data)}`);
    } else {
      console.log(dataPayload)
    }
  }
};

<WebView
  injectedJavaScript={debugging}
  onMessage={onMessage}
/>

与接受的问题的不同之处在于 webview 改变了您发布消息的方式。更多在这里