如何在react-native-render-html的ScrollView中依次排列react-native-video

问题现象 #

使用react-native-render-html在ScrollView中渲染多个react-native-video组件时，视频互相重叠，添加其他HTML元素后也无法正常显示。

解决方案 #

• 给自定义Video元素设置明确布局约束：RenderHTML需要准确知道元素尺寸来计算排版，必须为自定义video元素模型添加固定高度或最小高度样式，避免布局坍塌。
• 移除Video组件的flex:1属性：flex:1会让Video试图占满父容器剩余空间，导致多视频重叠，改用固定高度配合容器约束即可。
• 保持块级内容模型：维持HTMLContentModel.block确保元素以块级方式排列，避免inline布局冲突。

修改后的完整代码 #

import React from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import Video from "react-native-video";
import RenderHTML, {
  HTMLContentModel,
  HTMLElementModel,
} from "react-native-render-html";
import { SCREEN_WIDTH } from "../components/lib/constants";

function RenderHtml({ uri }: { uri: string }) {
  return (
    <RenderHTML
      contentWidth={SCREEN_WIDTH}
      source={{ html: uri }}
      customHTMLElementModels={{
        video: HTMLElementModel.fromCustomModel({
          tagName: "video",
          mixedUAStyles: {
            alignSelf: "center",
            width: SCREEN_WIDTH,
            minHeight: 300, // 关键：设置最小高度让RenderHTML计算布局
            marginVertical: 8, // 可选：添加垂直间距避免视频紧贴
          },
          contentModel: HTMLContentModel.block,
        }),
      }}
      renderers={{
        video: ({ tnode }) => {
          const link = tnode.domNode.attribs.src;
          return (
            <View style={styles.videoContainer}>
              <Video
                source={{ uri: link }}
                resizeMode={"contain"}
                style={styles.video}
                controls={true}
                paused={true}
              />
            </View>
          );
        },
      }}
    />
  );
}

export default function Test() {
  return (
    <ScrollView style={styles.container}>
      <RenderHtml
        uri={
          "<p>以下是两个测试视频：</p><video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' /><p>视频之间的文本内容</p><video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' />"
        }
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
    paddingHorizontal: 8,
  },
  videoContainer: {
    width: "100%",
    height: 300, // 固定容器高度
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 8,
  },
  video: {
    width: "100%",
    height: "100%",
  },
});

关键修改点说明 #

• 在customHTMLElementModels的video模型中添加minHeight:300和marginVertical:8，让RenderHTML正确预留视频布局空间。
• 用View容器包裹Video组件，通过容器固定高度控制视频尺寸，移除原Video组件的flex:1属性。
• 测试代码中添加<p>标签验证其他HTML元素的显示效果。

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