如何禁止RN的WebView点击target="_blank"链接跳转到外部浏览器？

以下方案均基于官方维护的 react-native-webview 组件实现，全程不涉及JS注入修改页面属性的操作，完全符合需求：

方案1：使用 onShouldStartLoadWithRequest 拦截请求（最简便） #

直接通过WebView原生提供的请求拦截回调，强制所有跳转在当前容器内加载即可：

• 给WebView组件添加onShouldStartLoadWithRequest属性
• 回调内统一返回true，RN会自动将包括target="_blank"触发的所有请求，都在当前WebView内加载，示例代码如下：

import WebView from 'react-native-webview';

const MyWebView = () => {
  const handleShouldStartLoad = (request) => {
    // 可自行添加判断逻辑，比如指定域名内的链接才在当前WebView打开，其余走外部浏览器
    // 无需额外判断直接返回true，即可实现所有链接都在当前容器加载
    return true;
  }

  return (
    <WebView
      source={{ uri: '你的目标页面地址' }}
      onShouldStartLoadWithRequest={handleShouldStartLoad}
    />
  )
}

方案2：启用多窗口支持适配原生新开页逻辑 #

如果需要保留页面原有target="_blank"的多窗口逻辑，只是把新开窗口的内容也放在当前WebView加载，可以用setSupportMultipleWindows配合onCreateWindow回调实现：

• 给WebView添加setSupportMultipleWindows={true}属性，开启原生多窗口支持
• 在onCreateWindow回调中拿到新窗口的请求地址，手动赋值给当前WebView加载即可，示例代码如下：

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

const MyWebView = () => {
  const webViewRef = useRef(null);

  const handleCreateWindow = (event) => {
    const targetUrl = event.nativeEvent.url;
    // 把新开窗口的地址加载到当前WebView
    webViewRef.current?.loadUrl(targetUrl);
    // 返回true表示你已经自行处理了新开窗口的请求，不会再触发外部浏览器跳转
    return true;
  }

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的目标页面地址' }}
      setSupportMultipleWindows={true}
      onCreateWindow={handleCreateWindow}
    />
  )
}

注意：该方案在iOS、Android端表现完全一致，不存在平台适配差异问题。

内容的提问来源于stack exchange，提问作者IveTien