React Native WebView：Android端如何实现iOS的scrollEnabled={false}效果？

我之前也碰到过这个坑——scrollEnabled={false}在iOS上能正常禁用WebView滚动，但Android端完全不生效，而且直接用ScrollView包裹WebView还容易触发崩溃。这里给你几个经过验证的解决思路：

方法1：注入JavaScript禁用网页内部滚动 #

这是最省心且兼容性最好的方案，毕竟Android的WebView对scrollEnabled属性支持确实拉胯，我们直接从网页层面下手禁用滚动：

你可以给WebView添加injectJavaScript属性，注入一段JS代码来彻底阻止滚动行为：

import { WebView, Platform } from 'react-native';

<WebView
  source={{ uri: '你的网页地址' }}
  // iOS端继续依赖原生属性
  scrollEnabled={Platform.OS === 'ios'}
  injectJavaScript={`
    // 锁定body的overflow，禁止网页自身滚动
    document.body.style.overflow = 'hidden';
    // 拦截touchmove事件，防止滑动触发滚动
    document.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, { passive: false });
    // 额外保险：如果网页有window级滚动，强制拉回顶部
    window.addEventListener('scroll', () => window.scrollTo(0, 0));
    true; // 必须返回true，否则injectJavaScript会抛出错误
  `}
/>

如果你的网页是本地HTML字符串，直接把这段JS写在HTML的<script>标签里效果一样。

方法2：自定义Android原生WebView包装（进阶方案） #

如果网页内容不可控（比如是第三方页面），注入JS的方式行不通，那可以通过自定义原生模块来控制Android的WebView：

1. 创建自定义的CustomWebViewManager，继承ReactWebViewManager
2. 在createViewInstance方法里直接操作WebView实例，禁用滚动：

@Override
protected WebView createViewInstance(ThemedReactContext reactContext) {
  WebView webView = super.createViewInstance(reactContext);
  // 隐藏滚动条
  webView.setVerticalScrollBarEnabled(false);
  webView.setHorizontalScrollBarEnabled(false);
  // 拦截触摸事件，阻止WebView处理滚动逻辑
  webView.setOnTouchListener((v, event) -> {
    // 消费触摸移动事件，不让WebView触发滚动
    return event.getAction() == MotionEvent.ACTION_MOVE;
  });
  return webView;
}

之后在React Native中注册这个自定义组件，就能直接使用带禁用滚动功能的WebView了。

关于ScrollView包裹WebView崩溃的问题 #

你提到的Android崩溃，大概率是WebView的高度计算出了问题——Android上WebView在ScrollView中如果用flex:1或者wrapContent，会导致WebView无限计算内容高度，最终引发内存溢出。

如果一定要用ScrollView包裹，必须给WebView设置精确的高度：

import { useState } from 'react';
import { ScrollView, WebView } from 'react-native';

function App() {
  const [webViewHeight, setWebViewHeight] = useState(0);

  return (
    <ScrollView>
      <WebView
        source={{ uri: '你的网页地址' }}
        scrollEnabled={false}
        style={{ height: webViewHeight }}
        onMessage={(event) => {
          // 网页主动传递自身高度
          const { height } = JSON.parse(event.nativeEvent.data);
          setWebViewHeight(height);
        }}
        injectedJavaScript={`
          // 页面加载完成后，把body的滚动高度传给RN
          window.ReactNativeWebView.postMessage(JSON.stringify({ height: document.body.scrollHeight }));
          true;
        `}
      />
    </ScrollView>
  );
}

通过网页传递自身高度给React Native，动态设置WebView的高度，就能避免滚动冲突和崩溃问题。

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