react-native-render-html中<ol>标签样式不生效问题求助

问题原因 #

<ol>是列表容器元素，本身并不直接渲染文本内容，所有文本都嵌套在子元素<li>中：

• 设置ol的color属性不会影响文本颜色，因为文本属于<li>；
• lineHeight设置在ol上仅作用于容器自身布局，不会传递给子元素<li>，因此无法控制列表项的行高。

解决方案 #

1. 基础方案：直接给

设置样式 #

将文本颜色和行高直接作用于<li>，这是最直接有效的方式：

<RenderHtml
  html={caraPakai}
  imagesMaxWidth={Dimensions.get('window').width - 30}
  allowFontScaling={false}
  ignoredStyles={[
    'font-weight',
    'color',
    'font-family',
    'font-size',
    'background-color'
  ]}
  tagsStyles={{
    li: { 
      color: '#707E8D',
      lineHeight: 22 // 控制列表项文本行高
    },
    ol: {
      // 可在此设置容器样式，如内边距、外边距
      paddingLeft: 20,
      marginVertical: 8
    },
  }}
/>

2. 进阶方案：自定义

渲染器 #

如果需要对<ol>容器做更精细的布局控制，可以通过自定义渲染器包裹列表内容：

import { View } from 'react-native';
import { RenderHtml, CustomRenderer } from 'react-native-render-html';

const CustomOLRenderer: CustomRenderer = ({ tchildren, style }) => {
  return (
    <View style={[style, { 
      // 容器级样式
      paddingLeft: 24,
      marginBottom: 12
    }]}>
      {tchildren}
    </View>
  );
};

// 使用自定义渲染器
<RenderHtml
  html={caraPakai}
  imagesMaxWidth={Dimensions.get('window').width - 30}
  allowFontScaling={false}
  ignoredStyles={[
    'font-weight',
    'color',
    'font-family',
    'font-size',
    'background-color'
  ]}
  tagsStyles={{
    li: { 
      color: '#707E8D',
      lineHeight: 22
    },
  }}
  customRenderers={{
    ol: CustomOLRenderer
  }}
/>

内容的提问来源于stack exchange，提问作者Pradana Fiqih P