React Native Webview 监听网页内部资源加载的探索

React Native Webview 组件没有自带的方式可以监听网页内部资源的加载（ jpg, png, js, css, mp3 等），曲线实现方式：用 js 注入定时器到网页，网页里获取节点的 src 属性并 postMessage 给 native ，以 img 节点为例：

import { WebView } from 'react-native-webview' let srcs:string[] = [] export default function WebviewScreen() { return ( <WebView source={{ uri: 'https://www.bing.com/images' }} useWebKit={true} allowsBackForwardNavigationGestures allowsInlineMediaPlayback injectedJavascriptBeforeCOntentLoaded= {` setInterval(()=>{ const nodes = document.querySelectorAll('img') for (const node of nodes) { window.ReactNativeWebView.postMessage(node.src) } }, 2000) `} OnMessage= {msg=>{ const src = msg.nativeEvent?.data?.trim() if (src && -1===srcs.indexOf(src)) { console.log('onMessage', new Date(), src) srcs.push(src) } }} /> ); } 

也可以用于 video 等其它带有 src 的节点

缺点：

1. 只能定时不能监听
2. 如果 crc 属性里是 blob:// 则会得到空字符串