Expo React Native集成Inertia.js WebView在安卓真机点击外部链接崩溃问题

嗨，我太懂你这种头疼的情况了——iOS和安卓模拟器都好好的，偏偏真机上点个外部链接就崩，完全摸不着头脑对吧？我来帮你拆解下可能的原因，再给几个实打实的解决方案试试：

先排查核心可能的问题点 #

1. WebView的导航拦截逻辑在安卓真机上触发了未捕获的异常
2. 安卓生产环境下调用Linking.openURL需要额外的权限/配置
3. Inertia.js的单页跳转逻辑和WebView的导航事件冲突了

解决方案1：完善WebView的导航拦截逻辑（最优先试） #

别用onNavigationStateChange来拦截链接，安卓真机上这个事件的触发时机和参数可能有问题，改用onShouldStartLoadWithRequest更稳妥，能提前拦截并区分内外链接：

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

// 替换成你的Laravel站点域名，用来区分内部Inertia链接
const INTERNAL_DOMAINS = ['your-laravel-app-domain.com'];

const handleLinkIntercept = (request) => {
  const targetUrl = request.url;
  // 判断是否为外部链接
  const isExternalLink = !INTERNAL_DOMAINS.some(domain => targetUrl.includes(domain));

  if (isExternalLink) {
    // 捕获打开链接的异常，避免崩溃
    Linking.openURL(targetUrl).catch(err => {
      console.error('打开外部链接失败:', err);
    });
    // 返回false阻止WebView加载这个外部链接
    return false;
  }
  // 内部Inertia链接让WebView正常处理
  return true;
};

// 在WebView组件中使用
<WebView
  source={{ uri: '你的Inertia页面地址' }}
  onShouldStartLoadWithRequest={handleLinkIntercept}
  // 其他必要属性（比如启用JavaScript等）
/>

解决方案2：配置安卓Intent权限 #

安卓生产环境下，App需要明确声明可以处理http/https链接的能力，否则调用Linking.openURL可能触发权限异常导致崩溃。在你的app.json中添加以下配置：

{
  "expo": {
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [
            {
              "scheme": "http",
              "host": "*",
              "pathPrefix": "/"
            },
            {
              "scheme": "https",
              "host": "*",
              "pathPrefix": "/"
            }
          ],
          "category": [
            "BROWSABLE",
            "DEFAULT"
          ]
        }
      ]
    }
  }
}

解决方案3：精准识别Inertia中的外部链接 #

如果上面的域名匹配不够精准，你可以在Laravel的Inertia视图（Vue/React/Blade）中给外部链接加个标记，比如data-external="true"，然后通过注入JS的方式拦截：

第一步：在Laravel页面中标记外部链接

<!-- 给外部链接添加自定义属性 -->
<a href="https://external-site.com" data-external="true">跳转到外部网站</a>

第二步：在WebView中注入JS监听点击事件

const injectExternalLinkHandler = `
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a[data-external="true"]');
  if (targetLink) {
    e.preventDefault();
    // 把链接地址发送给原生端处理
    window.ReactNativeWebView.postMessage(targetLink.href);
  }
});
true; // 必须返回true，否则注入会失败
`;

// 在WebView中使用
<WebView
  source={{ uri: '你的Inertia页面地址' }}
  injectedJavaScript={injectExternalLinkHandler}
  onMessage={(event) => {
    const externalUrl = event.nativeEvent.data;
    Linking.openURL(externalUrl).catch(err => console.error(err));
  }}
/>

解决方案4：排查WebView版本与ProGuard配置 #

• 你当前用的react-native-webview 13.12.5在安卓上可能存在已知的导航事件bug，可以尝试升级到最新稳定版，或者降级到13.8.6这类经过验证的版本。
• 如果是裸工作流的Expo项目，检查ProGuard配置，避免WebView相关代码被混淆：在android/app/proguard-rules.pro中添加：

-keep class com.reactnativecommunity.webview.** { *; }
-keep class com.facebook.react.views.webview.** { *; }

最后，建议你在真机上开启调试模式，用Android Studio的Logcat查看具体的崩溃日志——比如如果是NullPointerException就是变量未初始化，SecurityException就是权限问题，能帮你更快定位根源。

备注：内容来源于stack exchange，提问作者pbro