React Native中如何将API返回的HTML格式description渲染为普通文本

问题原因 #

React Native 内置的Text组件没有HTML解析能力，直接传入带HTML标签的字符串时，会把<p>、<br/>、<div>这类标签原样输出，无法得到预期的纯文本展示效果。

方案1：无依赖轻量实现（仅需纯文本、无格式保留需求） #

如果只需要剥离所有HTML标签拿到纯文本，不需要保留换行、加粗等格式，直接写正则处理字段即可，不需要安装第三方依赖：

• 先封装HTML转纯文本的工具函数

// 工具函数：剥离HTML标签，返回纯文本
const htmlToPlainText = (htmlStr) => {
  if (!htmlStr) return '';
  return htmlStr
    // 把换行类标签替换为系统识别的换行符，保留段落分隔
    .replace(/<br\s*\/?>/gi, '\n')
    .replace(/<\/p>/gi, '\n')
    .replace(/<\/div>/gi, '\n')
    // 移除所有剩余HTML标签
    .replace(/<[^>]*>/g, '')
    // 处理&nbsp;这类HTML实体空格
    .replace(/&nbsp;/g, ' ')
    // 清理多余空行、首尾空白字符
    .replace(/\n\s*\n/g, '\n')
    .trim();
};

• 修改原有渲染代码，处理description字段后再传入Text组件

return (
  <ScrollView style={[GlobalStyle.CustomScrollView]}>
    <HeaderBar3/>
    <Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
    <View style={[GlobalStyle.EventDetailView]}>
      <Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
      <Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
      <Text style={[GlobalStyle.EventDate]}>{date}</Text>
      <Text style={[GlobalStyle.EventTime]}>{startTime}{'-'}{endTime}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Venue:</Text>
      <Text style={[GlobalStyle.EventDescr]}>{eventData.venue}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Ticket:</Text>
      <Text style={[GlobalStyle.EventTicketPrice]}>{eventData.promotional_price}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Description:</Text>
      {/* 传入处理后的纯文本 */}
      <Text style={[GlobalStyle.EventDescr]}>{htmlToPlainText(eventData.description)}</Text>
    </View>
  </ScrollView>
);

注意：如果需要保留HTML里的超链接、加粗、斜体等富文本格式，不要用正则剥离方案，选择下面的第三方库方案。

方案2：第三方库实现（支持富文本渲染、兼容性更好） #

如果接口返回的HTML结构比较复杂（含嵌套标签、行内样式、特殊实体字符等），或者后续需要保留部分HTML格式，推荐用社区维护的成熟渲染库，比手写正则容错率高很多：

1. 安装依赖

# npm 安装
npm install react-native-render-html
# yarn 安装
yarn add react-native-render-html

2. 引入组件渲染HTML内容，配置和全局文本样式一致即可实现纯文本视觉效果，也可以按需开启富文本渲染能力

import RenderHtml from 'react-native-render-html';
import { useWindowDimensions } from 'react-native';

// 组件内获取容器宽度做适配
const { width } = useWindowDimensions();

// 替换原有description位置的渲染逻辑
return (
  <ScrollView style={[GlobalStyle.CustomScrollView]}>
    <HeaderBar3/>
    <Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
    <View style={[GlobalStyle.EventDetailView]}>
      <Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
      <Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
      <Text style={[GlobalStyle.EventDate]}>{date}</Text>
      <Text style={[GlobalStyle.EventTime]}>{startTime}{'-'}{endTime}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Venue:</Text>
      <Text style={[GlobalStyle.EventDescr]}>{eventData.venue}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Ticket:</Text>
      <Text style={[GlobalStyle.EventTicketPrice]}>{eventData.promotional_price}</Text>
      <Text style={[GlobalStyle.EventSubtitle]}>Description:</Text>
      <RenderHtml
        contentWidth={width}
        source={{html: eventData.description}}
        // 配置标签样式和项目原有全局样式对齐
        tagsStyles={{
          body: { ...GlobalStyle.EventDescr },
          p: { ...GlobalStyle.EventDescr, margin: 0 },
          div: { ...GlobalStyle.EventDescr }
        }}
      />
    </View>
  </ScrollView>
);

选型参考 #

• 接口返回HTML结构固定、内容简单，只需要纯文本效果选方案1，体积无额外开销
• HTML结构多变、存在特殊字符/富文本需求选方案2，自动处理实体转义、标签兼容问题，不需要手动维护正则规则

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