如何在 React Native WebVIew 中检测触摸事件

Question

我的应用程序使用 WebView 打开外部网页，现在当我的用户单击此 WebView 中的任何链接时，我想从 WebView 获取 URL，然后对我的应用程序中的 uri 执行某些操作，并终止 Webview，这样它就不会继续在 webView 或 broswer 中打开 url

Answer 1

好吧，假设你有这个代码结构

import { WebView } from 'react-native-webview';

const Test = () => {
 const handleUrlLoading = (request) => {
  const { url } = request;
  if (shouldHandleUrl(url)) {
   console.log("Handling URL internally:", url);
   return false;
  }
  return false;   //return true; if you still want to open other url inside WebView
 };
 return (
  <WebView
   source={{ uri: 'https://example.com' }}
   onShouldStartLoadWithRequest={handleUrlLoading}
  />
 );
}
function shouldHandleUrl(url) {
 return url.includes('https://www.iana.org/help/example-domains');
}

请注意，在

shouldHandleUrl

中，我显式硬编码了页面包含的 url，因此当用户在 WebView 中交互时，一旦触发请求，该函数就会被触发，它将与我们定位的 url 匹配，然后阻止它从 WebView 中打开，但控制台记录它， 最后，在应用程序外部重定向是一个片段代码：

Linking.openURL(url).catch(err => {console.error("Failed to open URL:", err);});