React Native Render HTML 项目符号列表不以文本为中心答案

【问题标题】：React Native Render HTML bullet list is not centered with textReact Native Render HTML 项目符号列表不以文本为中心
【发布时间】：2021-11-17 16:01:45
【问题描述】：

我正在使用react-native-render-html library 显示来自django-ckeditor 的存储在RichTextUploadingField 中的Django Rest Framework 数据。由于基本样式工作正常，<ul> 标签存在问题 - 如图所示，文本未以圆形/正方形/数字为中心。我尝试使用renderersProps，例如：

<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />

但它适用于特定的文本大小。如果我在 Django admin 中更改样式中的文本大小，则元素和文本不会再次居中。有没有关于如何解决它或导致问题的任何选项？

【问题讨论】：

标签： django react-native django-ckeditor

【解决方案1】：

您只能将自定义 CSS 类添加到无序列表项。然后将您的样式应用到该 CSS 类。

// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
  const { children, name } = el;
  if (name === 'ul' && children && children.length) {
      children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
  }
}

// define your styles for your custom class
const classesStyles = {
  "ul-li": {
    lineHeight: '21px', // for me adjusting lineHeight did the job
  }
}

// in your JSX
<RenderHtml
  source={source}
  contentWidth={width}
  tagsStyles={tagsStyles}
  ... // other props you may have
  domVisitors={{onElement}} // first alter your html
  classesStyles={classesStyles} // then apply styles
/>

来源： classesstyles onElement

【讨论】：