React Native WebView如何阻止跳转至已安装APP？

我之前也踩过这个坑——电商类网站比如亚马逊经常会通过URL Scheme或者深层链接唤起本地APP，直接跳出WebView。咱们可以从这几个方向来处理，把用户牢牢留在WebView里：

1. 核心方案：用onShouldStartLoadWithRequest拦截跳转请求 #

这是最关键的一步，这个回调会在WebView发起任何加载请求前触发，我们可以在这里判断请求的URL是不是唤起APP的链接，直接阻止跳转，甚至替换成网页版地址。

把这个属性加到你的WebView组件里，结合具体网站的跳转规则做拦截：

<WebView
  source={{ uri: link }}
  style={styles.webView}
  geolocationEnabled={true}
  allowsLinkPreview={false}
  automaticallyAdjustContentInsets={false}
  onNavigationStateChange={e => this.setState({ link: e.url })}
  onLoadStart={() => this.setState({ loading: true })}
  onLoadEnd={() => this.setState({ loading: false })}
  ref={ref => (this.webView = ref)}
  // 新增：拦截跳转请求
  onShouldStartLoadWithRequest={(request) => {
    const targetUrl = request.url;
    
    // 拦截APP专属Scheme，比如亚马逊的amzn://、淘宝的tbopen://等
    const appSchemes = ['amzn://', 'tbopen://', 'tmall://'];
    if (appSchemes.some(scheme => targetUrl.startsWith(scheme))) {
      // 可以选择直接阻止跳转，或者替换成网页版链接加载
      // 比如亚马逊网页版：this.webView.injectJavaScript(`window.location.href = 'https://www.amazon.com';`);
      return false;
    }

    // 拦截带跳转参数的HTTPS链接（比如亚马逊的app-redirect链接）
    if (targetUrl.includes('amazon.com') && targetUrl.includes('app-redirect')) {
      // 提取纯网页版URL并加载
      const webUrl = targetUrl.split('app-redirect')[0];
      this.webView.injectJavaScript(`window.location.href = '${webUrl}';`);
      return false;
    }

    // 其他正常链接允许加载
    return true;
  }}
/>

2. 辅助方案：修改User-Agent伪装成普通浏览器 #

有些网站会根据请求的User-Agent判断是否是WebView，进而触发APP唤起逻辑。我们可以把WebView的UA改成普通手机浏览器的UA，让网站认为是浏览器访问：

<WebView
  // ...其他属性
  userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
/>

这个UA是iPhone Safari的标准UA，你可以根据测试机型调整成对应的浏览器UA。

注意事项 #

• 不同网站的唤起规则不一样，比如亚马逊可能有多种跳转链接格式，你可以通过抓包工具（比如Charles）查看具体的跳转URL，针对性调整拦截逻辑；
• 如果遇到JavaScript触发的跳转，onShouldStartLoadWithRequest同样能拦截到，因为它监听所有加载请求，包括JS发起的；
• 部分网站可能会通过iframe或者隐藏链接跳转，这时候只要确保onShouldStartLoadWithRequest覆盖到所有请求即可。

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