React Native：Android原生WebView内点击事件失效问题

针对Android端WebView点击失效、iOS端正常的情况，给出以下可行的解决方向：

1. 用NativeViewGestureHandler包裹WebView #

在RN层面，给原生WebView组件套一层NativeViewGestureHandler，明确禁止手势处理器打断WebView的触摸事件：

import { NativeViewGestureHandler } from 'react-native-gesture-handler';

// 在你的组件中
<GestureHandlerRootView style={styles.gestureHandlerStyles}>
  <NativeViewGestureHandler disallowInterruption={true}>
    <Root initialProps={props} />
  </NativeViewGestureHandler>
</GestureHandlerRootView>

disallowInterruption={true}会让WebView优先处理触摸事件，避免GestureHandlerRootView拦截。

2. Android原生层面对WebView做事件处理 #

在你封装的Android原生WebView子类中，重写触摸相关方法，确保WebView能拿到事件：

public class CustomWebView extends WebView {
    public CustomWebView(Context context) {
        super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 通知父布局不要拦截当前触摸事件
        getParent().requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        // 优先让WebView处理触摸事件
        getParent().requestDisallowInterceptTouchEvent(true);
        return super.onInterceptTouchEvent(event);
    }
}

这样能强制让WebView的触摸事件不被上层的GestureHandlerRootView拦截。

3. 排查手势冲突 #

如果GestureHandlerRootView内部还有其他手势组件，暂时移除这些组件验证是否存在手势优先级冲突。部分手势组件会抢占触摸事件，导致WebView无法响应点击。

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