React Native WebView点击URL Android检测失效iOS正常 如何解决？

• Android端onNavigationStateChange事件仅在WebView发生真实页面导航（整页加载、地址栏变更）时触发，若点击分享按钮的动作是JS自定义事件、调用了preventDefault取消默认跳转、或是单页应用的内部路由（pushState/replaceState）、或是仅触发自定义逻辑不跳转页面，该事件都不会被触发，iOS端WebView的事件触发逻辑不同因此可以正常捕获。
• 你原有代码存在语法错误：const { url } = navState.url 属于错误解构，navState本身已携带url属性，正确写法为const { url } = navState，不过这个不是核心问题，即使修复也无法解决Android端的事件丢失问题。

采用WebView与RN原生层的JS消息通信机制实现，不需要捕获URL跳转，稳定性更高，全平台兼容：

步骤1：配置消息交互逻辑 #

如果前端页面支持修改，直接让前端同学在分享按钮的点击逻辑中新增调用即可：

// WebView加载的前端页面代码，点击分享按钮时执行
window.ReactNativeWebView.postMessage(JSON.stringify({
  action: 'openShare',
  shareUrl: '需要分享的URL',
  shareTitle: '自定义分享标题'
}))

如果无法修改前端代码，可通过injectedJavaScript属性注入JS代码自动监听分享按钮点击：

const injectedJs = `
  // 替换为你页面中分享按钮对应的选择器，可匹配类名、id、自定义属性等
  const shareBtns = document.querySelectorAll('.share-btn, [data-action="share"]');
  shareBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      // 阻止默认跳转行为（如果存在）
      e.preventDefault();
      // 按需调整获取分享链接的逻辑
      const shareUrl = window.location.href;
      window.ReactNativeWebView.postMessage(JSON.stringify({
        action: 'openShare',
        shareUrl: shareUrl
      }));
    })
  });
  true; // 注入JS必须返回true避免运行报错
`

步骤2：修改WebView组件配置 #

// 可使用RN自带的Share模块，也可以用第三方分享库
import { Share } from 'react-native';

<WebView
  scalesPageToFit
  style={{ flex: 1 }}
  source={{ uri: url }}
  onLoadStart={() => setLoading(true)}
  onLoadEnd={() => setLoading(false)}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  onNavigationStateChange={handleNavigationStateChange}
  // 新增以下两个属性
  injectedJavaScript={injectedJs}
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.action === 'openShare') {
      // 调用系统分享面板
      Share.share({
        message: data.shareUrl,
        title: data.shareTitle || '分享内容'
      }).catch(err => console.log(err));
      console.log('OPEN SHARE CONTROLLER')
    }
  }}
  onLoadProgress={({ nativeEvent }) => {
    console.log(nativeEvent.url)
  }}
/>

原有handleNavigationStateChange中的退出登录、普通链接跳转逻辑不需要修改，可正常运行。

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