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 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 = {
  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 改变了您发布消息的方式。 More here

Answer 2

好吧，我毕竟知道了。我只需要向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 3

除了上面@Caesar 的解决方案之外，如果您按如下所示替换 onMessage，则效果很好：

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

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

};

React Native WebView中的Javascript console.log（）

3 个答案: