react-native-render-html在三星S23等安卓设备文本截断问题求助

问题现象 #

• 使用react-native-render-html渲染HTML内容，iOS及多数安卓设备表现正常，但三星Galaxy S23等部分高分辨率安卓设备出现文本末尾截断（例：截图中"toilet"文本被截断）
• 更长文本可正常渲染，暂未明确是否与屏幕分辨率直接相关

重现代码 #

const myStyles = StyleSheet.create<Styles>({
  // ...其他样式
  messageText: {
    fontFamily: myFont,
    color: grey800,
    // 注：将字号调至14.5及以上时部分文本可完整显示，但仍存在随机异常
    fontSize: Platform.OS === 'android' ? 14.5 : 14,
    lineHeight: 20,
    flex: 1,
    fontWeight: 'normal',
    margin: 0,
    padding: 0,
  },
  // ...其他样式
})

// 为文本标签绑定样式
['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'].forEach(tag => {
  tagsStyles[tag] = myStyles.text as MixedStyleDeclaration; // *注：此处疑似笔误，应为myStyles.messageText*
});

// 渲染HTML组件
{text && (
  <HTML
   debug
   tagsStyles={tagsStyles}
   source={{
      html: text,
   }}
   contentWidth={containerWidth}
  />
)}

已尝试的临时方案 #

调整字号可临时缓解，但表现随机：

• 部分文本设为14.001可正常显示，设为14则截断
• 部分文本需将字号调至14.5才能完整渲染
• 查阅官方文档未找到针对性解决方案

可行解决方案建议 #

1. 精确计算contentWidth #

确保containerWidth是容器的实际可用宽度，避免包含padding/margin，可通过动态获取屏幕尺寸计算：

import { useWindowDimensions } from 'react-native';

// 在组件内获取动态宽度
const { width: screenWidth } = useWindowDimensions();
// 减去容器左右内边距（示例为各10px）
const containerWidth = screenWidth - 20;

2. 修复字体渲染精度误差 #

安卓端字体渲染可能存在亚像素计算偏差，给文本样式添加极小的右侧内边距：

messageText: {
  // ...原样式
  paddingRight: Platform.OS === 'android' ? 0.5 : 0, // 避免文本边缘被裁剪
}

同时可调整lineHeight为字号的1.4-1.6倍（如14号字对应19.6-22.4），避免行高与字号的组合导致布局溢出。

3. 自定义文本标签渲染器 #

绕过库的默认文本渲染逻辑，直接用React Native的Text组件渲染文本标签：

const renderers = {
  p: (htmlAttribs, children) => (
    <Text style={myStyles.messageText}>{children}</Text>
  ),
  li: (htmlAttribs, children) => (
    <Text style={myStyles.messageText}>{children}</Text>
  ),
  // 同理处理h1-h6等其他文本标签
};

// 在HTML组件中传入自定义渲染器
<HTML
  debug
  tagsStyles={tagsStyles}
  source={{ html: text }}
  contentWidth={containerWidth}
  renderers={renderers}
/>

4. 升级库版本 #

检查当前使用的react-native-render-html版本，部分布局裁剪bug可能已在新版本中修复，尝试升级至最新稳定版。

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