TapGestureHandler嵌套WebView时网页内部按钮点击失效问题

问题原因 #

这个问题是TapGestureHandler默认的触摸事件拦截优先级高于内部嵌套的原生WebView组件导致的，WebView接收到的触摸事件会被外层的手势处理器提前消费，所以网页内的按钮点击无法触发。

可行解决方案 #

最通用的解决方法是用NativeViewGestureHandler包裹WebView，配置手势优先级避免外层拦截：

1. 首先导入对应的组件

import { TapGestureHandler, NativeViewGestureHandler } from 'react-native-gesture-handler';
import WebView from 'react-native-webview';

2. 声明NativeViewGestureHandler的引用，配置手势规则

// 函数组件写法
const webViewGestureRef = useRef(null);

// 组件结构
<TapGestureHandler
  // 等待WebView的手势处理器判断是否消费事件
  waitFor={webViewGestureRef}
  onHandlerStateChange={/* 你原来的Tap点击处理逻辑 */}
>
  <NativeViewGestureHandler 
    ref={webViewGestureRef}
    // 禁止其他手势打断WebView的原生事件
    disallowInterruption={true}
  >
    <WebView
      source={{ uri: '你的目标网页地址' }}
      // 保留你原来的WebView所有配置项
      javaScriptEnabled={true}
      allowFileAccess={true}
    />
  </NativeViewGestureHandler>
</TapGestureHandler>

如果你的业务场景中TapGestureHandler不需要响应WebView区域的点击，也可以直接调整布局结构，不要把WebView嵌套在TapGestureHandler内部，仅把需要响应外层点击的区域放入TapGestureHandler即可。

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