React Native WebView中如何检测页面内用户按钮点击事件

完全不需要修改后端代码，所有逻辑均可在React Native前端侧实现，核心通过注入JS监听点击+onMessage回调接收消息的方案实现，具体操作如下：

1. 编写注入的JS脚本 #

提前写好要注入到WebView页面的JS代码，作用是监听页面点击事件，将点击元素的信息回传给RN层：

const injectedClickJS = `
// 全局监听点击事件，使用捕获模式避免被页面原有逻辑阻止冒泡
document.addEventListener('click', function(e) {
  const target = e.target;
  // 可根据实际需求自定义要传递的字段，比如按钮ID、类名、文本、链接等
  const clickData = {
    tagName: target.tagName,
    elementId: target.id,
    elementClass: target.className,
    textContent: target.innerText.trim(),
    linkUrl: target.href || ''
  };
  // 向RN侧发送消息
  window.ReactNativeWebView.postMessage(JSON.stringify(clickData));
}, true);
`

如果只需要监听特定按钮的点击，可将全局监听替换为指定选择器的元素监听，性能更优，示例：

// 仅监听类名为submit-btn的按钮点击
document.querySelectorAll('.submit-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    window.ReactNativeWebView.postMessage(JSON.stringify({type: 'submit_click'}));
  }, true);
})

2. 修改WebView组件配置 #

给现有WebView添加注入脚本和消息接收的属性，修改后的代码如下：

<WebView 
  scalesPageToFit
  startInLoadingState
  originWhitelist={['*']}
  style={{ flex: 1 }} 
  source={{ uri: url  }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  setSupportMultipleWindows={false}
  // 新增配置项
  injectedJavaScript={injectedClickJS}
  // 配置为DOM加载前就注入脚本，避免漏监早期渲染的元素
  injectedJavaScriptBeforeContentLoaded={true}
  // 接收WebView传递的消息
  onMessage={(event) => {
    try {
      const clickInfo = JSON.parse(event.nativeEvent.data);
      // 此处根据拿到的点击信息做判断，执行对应逻辑
      // 示例：如果点击的是文本为「立即提交」的按钮，执行对应操作
      if (clickInfo.textContent === '立即提交') {
        console.log('检测到目标按钮点击', clickInfo);
        // 你的业务逻辑
      }
    } catch (err) {
      console.log('消息解析失败', err);
    }
  }}
/> 

注意事项 #

• 如果页面存在iframe嵌套，需要额外给iframe也注入对应监听脚本
• 注入的JS语法要符合WebView加载站点的JS兼容标准，避免语法报错导致监听不生效

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