React Native Android中Horizontal Flat List行内WebView无法滚动的解决方法

嘿，这个问题我之前也踩过坑！核心原因是Android的触摸事件分发机制——横向的FlatList会优先拦截触摸滚动事件，导致WebView根本没机会处理自己的横向滚动；而iOS的事件处理逻辑是从最上层视图往下传递，所以WebView能优先拿到滚动事件，自然正常工作。下面给你两个靠谱的解决方案：

方案一：通过触摸事件阻止FlatList拦截（推荐） #

我们可以在WebView的触摸事件里，明确告诉父级FlatList不要拦截当前的触摸操作，让WebView自己处理滚动。

步骤1：给WebView添加Ref #

首先要获取到原生WebView的实例，所以得给你的AppQuestionWebView加个Ref：

• 如果是函数组件：

  const webViewRef = useRef(null);
  

• 如果是类组件：

  constructor(props) {
    super(props);
    this.webViewRef = React.createRef();
  }
  

步骤2：传递Ref到原生WebView（如果是自定义组件） #

如果你封装了AppQuestionWebView，需要把外部的Ref转发给内部的原生WebView组件：

const AppQuestionWebView = React.forwardRef((props, ref) => {
  return (
    <WebView
      ref={ref}
      {...props}
      // 其他自定义逻辑
    />
  );
});

步骤3：添加触摸事件处理 #

在使用AppQuestionWebView时，加上触摸事件，调用Android原生方法阻止父容器拦截：

<AppQuestionWebView
  ref={webViewRef}
  style={styles.questionWebView}
  index={this.props.index}
  source={this.props.questionObject.processed_data.question}
  onStartLoad={this.onQuestionStartLoad}
  onEndLoad={this.onQuestionEndLoad}
  onTouchStart={() => {
    // 告诉父容器不要拦截触摸事件
    webViewRef.current?.requestDisallowInterceptTouchEvent(true);
  }}
  onTouchMove={() => {
    webViewRef.current?.requestDisallowInterceptTouchEvent(true);
  }}
  onTouchEnd={() => {
    // 触摸结束后恢复拦截，让FlatList可以正常滚动
    webViewRef.current?.requestDisallowInterceptTouchEvent(false);
  }}
/>

方案二：调整WebView的Android特定属性（备选） #

如果方案一没生效，还可以试试给WebView设置androidLayerType="software"（不过这个可能会影响WebView的渲染性能，建议作为备选方案）：

<WebView
  androidLayerType="software"
  // 其他属性
/>

这样处理后，Android端的WebView就能正常横向滚动，不会误触发FlatList的行切换啦！

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