React Native Android端WebView嵌套FlatList问题及自定义WebView咨询

一、优先尝试现有库解决滚动冲突（无需原生开发） #

你遇到的核心问题是WebView与FlatList/ScrollView的滚动冲突，并非必须直接开发原生自定义WebView，可以先通过以下方案解决：

1. 禁用WebView自身滚动并动态计算高度 #

使用官方维护的react-native-webview，禁用WebView的滚动功能，让父容器（FlatList）接管滚动，同时通过JS桥获取WebView内容的真实高度，避免内容截断：

import React, { useState } from 'react';
import { FlatList, View } from 'react-native';
import { WebView } from 'react-native-webview';

const WebViewListItem = ({ htmlContent }) => {
  const [webViewHeight, setWebViewHeight] = useState(0);

  // 接收WebView发送的内容高度
  const handleWebMessage = (event) => {
    const contentHeight = parseInt(event.nativeEvent.data, 10);
    if (!isNaN(contentHeight)) {
      setWebViewHeight(contentHeight);
    }
  };

  // 注入JS获取页面高度
  const injectedHtml = `
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>* { margin: 0; padding: 0; box-sizing: border-box; }</style>
      </head>
      <body>
        ${htmlContent}
        <script>
          // 页面加载完成后发送高度
          window.addEventListener('load', () => {
            window.ReactNativeWebView.postMessage(document.body.scrollHeight.toString());
          });
          // 监听内容变化（如果有动态内容）
          const observer = new MutationObserver(() => {
            window.ReactNativeWebView.postMessage(document.body.scrollHeight.toString());
          });
          observer.observe(document.body, { childList: true, subtree: true });
        </script>
      </body>
    </html>
  `;

  return (
    <WebView
      source={{ html: injectedHtml }}
      scrollEnabled={false} // 禁用WebView自身滚动
      style={{ height: webViewHeight, width: '100%' }}
      onMessage={handleWebMessage}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
};

// 嵌套在FlatList中使用
const AppFlatList = () => {
  const listData = [
    { id: '1', html: '<p>第一段HTML内容，支持多行、样式</p>' },
    { id: '2', html: '<div style="color: red; padding: 10px;">第二段带样式的HTML</div>' }
  ];

  return (
    <FlatList
      data={listData}
      renderItem={({ item }) => <WebViewListItem htmlContent={item.html} />}
      keyExtractor={(item) => item.id}
      contentContainerStyle={{ padding: 10 }}
    />
  );
};

export default AppFlatList;

2. 尝试优化第三方HTML渲染库 #

如果WebView的性能或兼容性仍有问题，可以尝试react-native-render-html的最新版本（v6+），它支持直接渲染HTML为RN原生组件，天然适配FlatList的滚动，无需处理WebView的冲突：

import React from 'react';
import { FlatList } from 'react-native';
import RenderHtml from 'react-native-render-html';

const HtmlListItem = ({ html }) => {
  const tagsStyles = {
    p: { marginVertical: 8 },
    div: { padding: 10 }
  };

  return (
    <RenderHtml
      contentWidth={350} // 根据设备宽度调整
      source={{ html }}
      tagsStyles={tagsStyles}
    />
  );
};

// FlatList中使用
const AppList = () => {
  const data = [/* 你的数据 */];
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <HtmlListItem html={item.html} />}
      keyExtractor={(item) => item.id}
    />
  );
};

二、原生自定义WebView的方向指引（当现有方案无效时） #

如果上述方案无法满足需求，再考虑开发安卓原生自定义WebView，核心步骤如下：

1. 基于官方WebView扩展 #

安卓端可以继承com.reactnativecommunity.webview.RNCWebView（react-native-webview的原生类），实现嵌套滚动支持：

• 让WebView实现NestedScrollingChild接口（安卓5.0+），允许它与父滚动容器（FlatList的RecyclerView）协同滚动
• 重写onTouchEvent和onInterceptTouchEvent方法，处理滚动事件的分发逻辑

2. 封装RN原生模块 #

• 创建自定义WebViewManager，继承RNCWebViewManager，通过@ReactProp暴露自定义属性（如enableNestedScroll）
• 在MainApplication.java中注册这个自定义模块

3. RN端调用自定义组件 #

在RN端创建对应的组件，导入原生模块并使用，即可调用自定义的WebView功能。

三、关键注意事项 #

• 优先使用官方react-native-webview，它的原生实现已经处理了大部分兼容性问题
• 动态计算WebView高度时，要考虑页面动态内容的变化（如图片加载完成后高度变化），可以通过MutationObserver监听

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