React Native Render HTML设置lineHeight致行内图片布局错乱求助

场景与问题 #

在React Native中使用react-native-render-html（Foundry版本）渲染包含行内图片和文本的HTML内容，已自定义img元素模型支持混合内容，但设置全局文本行高后出现布局问题：

• 全局设置lineHeight:24时，所有文本行（包括含行内图片的行）都应用固定行高，导致图片与文字重叠，布局错乱
• 不设置自定义行高时，含图片的行会根据图片大小自动调整高度，显示正常

需求：普通文本行保留自定义行高，含行内图片的行自适应高度以适配图片。

相关代码示例 #

HTML内容 #

<div class="bbWrapper">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pariatur anim occaecat mollit amet dolor ut laboris fugiat quis cupidatat non ad reprehenderit id. Nisi ut enim adipisicing duis deserunt anim nostrud duis ex dolore laborum qui incididunt. Labore dolor magna commodo deserunt consectetur.
  .<br>
  lorem ipsum dolor sit amet <img src="https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom.png?v=01" srcset="https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom.png?v=01 1x, https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom_x2.png?v=01 2x" class="smilie" loading="lazy" alt=":after_boom:" title="after_boom    :after_boom:" data-shortname=":after_boom:"></div>

自定义img元素模型 #

const customHTMLElementModels = {
  img: defaultHTMLElementModels.img.extend({
    contentModel: HTMLContentModel.mixed,
  }),
};

全局行高设置的RenderHTML组件 #

<RenderHTML
  contentWidth={width}
  source={source}
  customHTMLElementModels={customHTMLElementModels}
  renderersProps={renderersProps}
  enableCSSInlineProcessing={true}
  debug
  defaultTextProps={{
    selectable: true,
    style: {
      fontFamily: 'sans-serif',
      fontSize: 16,
      fontWeight: '400',
      lineHeight: 24, // 导致布局错乱的行高设置
      color: 'black',
    },
  }}
/>

可行解决方案 #

方案1：通过CSS选择器精准控制行高 #

利用RenderHTML的stylesheet属性，通过CSS选择器为普通文本容器设置行高，同时为包含图片的行重置行高：

const stylesheet = {
  ".bbWrapper": {
    lineHeight: 24,
  },
  // 为包含图片的容器重置行高为自适应
  ".bbWrapper:has(img)": {
    lineHeight: 'auto',
  },
  // 调整图片垂直对齐，优化布局
  ".bbWrapper img": {
    verticalAlign: 'middle',
  },
};

然后在RenderHTML组件中添加stylesheet={stylesheet}，同时移除defaultTextProps中的lineHeight配置。

方案2：自定义文本渲染器动态调整行高 #

创建自定义文本渲染器，检测当前文本节点是否与图片同属一个父节点，动态决定是否应用自定义行高：

import { TextRenderer, createRenderer } from 'react-native-render-html';

const CustomTextRenderer = createRenderer(TextRenderer, {
  component: (props) => {
    // 检查父节点下是否包含图片元素
    const hasAdjacentImage = props.tnode.parent?.children.some(child => child.type === 'img');
    // 根据是否有图片动态设置行高
    const textStyle = {
      ...props.style,
      lineHeight: hasAdjacentImage ? 'auto' : 24,
    };
    return <TextRenderer.component {...props} style={textStyle} />;
  },
});

// 配置自定义渲染器
const renderers = {
  text: CustomTextRenderer,
};

在RenderHTML组件中添加renderers={renderers}，保持defaultTextProps中的其他样式配置。

方案3：为图片设置高优先级样式覆盖行高 #

扩展img元素模型的样式，设置lineHeight: 'auto'并调整垂直对齐，确保图片所在行能自适应高度：

const customHTMLElementModels = {
  img: defaultHTMLElementModels.img.extend({
    contentModel: HTMLContentModel.mixed,
    styles: {
      base: {
        verticalAlign: 'middle',
        lineHeight: 'auto',
      },
    },
  }),
};

或者通过renderersProps为图片设置样式：

const renderersProps = {
  img: {
    style: {
      verticalAlign: 'middle',
      lineHeight: 'auto',
    },
  },
};

此方案可保留defaultTextProps中的全局行高设置，图片所在行的行高会被图片样式覆盖。

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