React-native-render-html：如何渲染上标与下标文本？

问题原因 #

多数React Native富文本渲染库（如react-native-render-html）对tagsStyles中的布局类样式（如lineHeight、top、textAlignVertical）支持有限，仅能识别color、fontSize这类基础文本样式，导致你设置的排版属性不生效。

可行解决办法 #

1. 自定义标签渲染器（推荐） #

以react-native-render-html为例，通过自定义sup/sub的渲染组件，用原生View+Text组合实现精准排版：

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

// 自定义上标组件
const CustomSup = ({ children, style }) => (
  <View style={{ position: 'relative', top: -8, marginHorizontal: 1 }}>
    <Text style={[style, { fontSize: 12 }]}>{children}</Text>
  </View>
);

// 自定义下标组件
const CustomSub = ({ children, style }) => (
  <View style={{ position: 'relative', top: 4, marginHorizontal: 1 }}>
    <Text style={[style, { fontSize: 12 }]}>{children}</Text>
  </View>
);

// 配置渲染器
const htmlRenderConfig = {
  renderers: {
    sup: CustomSup,
    sub: CustomSub,
  },
};

// 使用组件
<RenderHTML html={yourHtmlContent} renderers={htmlRenderConfig} />

可根据需求调整top值、fontSize和外边距，适配不同排版需求。

2. 内嵌CSS（WebView场景） #

如果你的富文本通过WebView渲染，直接在HTML中嵌入CSS样式即可：

<style>
  sup { vertical-align: super; font-size: 0.7em; line-height: 0; }
  sub { vertical-align: sub; font-size: 0.7em; line-height: 0; }
</style>
<p>上标示例：x<sup>2</sup></p>
<p>下标示例：H<sub>2</sub>O</p>

WebView支持完整CSS属性，能完美实现上标下标默认排版效果。

替代库方案 #

• react-native-htmlview：支持通过transformStyles自定义标签样式，或重写renderNode方法处理sup/sub标签
• expo-html-elements：对HTML原生标签的样式映射更完善，无需额外配置即可支持sup/sub的标准排版

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