react-native-render-html项目符号列表标记与文本无法对齐如何解决？

1. 你之前使用的top: 5是固定像素偏移，仅适配特定字号下的文本基线位置。当CKEditor修改文本字号后，对应行的行高、文本垂直中心点都会发生变化，硬编码的偏移值自然无法适配。
2. react-native-render-html默认的列表标记是独立渲染的内联元素，未和相邻文本共享对齐规则，默认对齐逻辑为顶对齐，字号变化后就会出现错位。
3. django-ckeditor输出的富文本会给不同层级的内容添加行内font-size、line-height样式，这些动态样式不会同步到你单独配置的marker样式中，进一步放大了对齐偏差。

• 方案一：动态对齐配置（无侵入，改动最小）
  直接替换原有硬编码的偏移配置，用flex自动对齐逻辑适配任意字号：

<RenderHTML 
  renderersProps={{ 
    ul: { 
      markerBoxStyle:{ 
        paddingRight: 3, 
        alignSelf: 'center' // 自动和所在行文本居中对齐，替代固定top值
      }, 
      markerTextStyle: { 
        color: "red",
        lineHeight: undefined // 继承当前文本行的行高，避免行高不一致导致偏移
      } 
    },
    // 同步配置有序列表，避免同类问题
    ol: {
      markerBoxStyle:{ 
        paddingRight: 3, 
        alignSelf: 'center'
      }, 
      markerTextStyle: { 
        lineHeight: undefined
      } 
    }
  }}
  // 统一li元素的对齐规则
  tagsStyles={{
    li: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      marginVertical: 2
    }
  }}
/>

• 方案二：自定义列表渲染器（兼容性最好，适配所有复杂富文本场景）
  如果方案一在部分特殊富文本结构下仍有对齐问题，可以自定义li渲染器，完全控制标记和文本的对齐逻辑：

import { View, Text } from 'react-native';
import RenderHTML from 'react-native-render-html';

const customRenderers = {
  li: ({ TDefaultRenderer, marker, children, style, ...rest }) => {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 2 }}>
        <Text style={{ marginRight: 6 }}>{marker}</Text>
        <TDefaultRenderer style={style} {...rest}>{children}</TDefaultRenderer>
      </View>
    );
  }
};

// 组件内使用
<RenderHTML
  source={{ html: yourHtmlContent }}
  renderers={customRenderers}
  // 其他原有配置可保留
/>

以上两种方案都不需要固定任何像素偏移值，不管后台修改多大的字号，都可以自动实现列表标记和文本的居中对齐。

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