React Native中如何保留接口响应里的HTML标签？

问题原因分析 #

你提供的doGet方法本身不会自动删除HTML标签，问题大概率出在**responseHandlerGet对响应的后续解析/处理环节**，或是最终渲染时的处理：

1. 接口返回的是转义后的HTML字符（如<ol>），当用response.json()解析时，JSON会自动将其转换为实际的HTML标签（<ol>）；
2. React Native的原生Text组件会忽略HTML标签，只渲染纯文本内容，所以最终只显示some text；
3. 如果responseHandlerGet中还做了提取HTML文本的操作（比如通过DOM解析器或第三方工具移除标签），也会导致标签丢失。

排查步骤 #

先确认原始响应内容：在doGet的fetch回调中添加日志，查看未解析的原始响应文本：

fetch(encodedUrl, this.getReqConfig("GET", headers, null)).then(initialResponse => {
  // 新增这行日志，查看原始响应字符串
  initialResponse.text().then(rawText => console.log('原始响应文本:', rawText));
  console.log('>>> initial ', JSON.stringify(initialResponse));
  dataObj['initialResponse'] = initialResponse;
  this.responseHandlerGet(url, dataObj, resolve, reject);
})

如果原始文本包含<ol>，说明问题出在后续解析或渲染环节；如果没有，再检查接口返回是否和Postman一致。

解决办法 #

1. 正确渲染HTML标签（推荐） #

如果需要保留HTML结构并渲染，使用react-native-render-html库解析渲染：

• 安装依赖：

  npm install react-native-render-html
  

• 组件中使用示例：

  import RenderHtml from 'react-native-render-html';
  import { Dimensions } from 'react-native';
  
  // 假设你已获取到单条faq数据
  return (
    <RenderHtml
      contentWidth={Dimensions.get('window').width}
      source={{ html: faqItem.answer }}
    />
  );
  

2. 保留转义后的HTML字符串（不渲染） #

如果只是想把<ol>some text</ol>作为字符串保留，在解析后重新转义标签：

// 在responseHandlerGet的解析逻辑中添加
const parsedData = await initialResponse.json();
parsedData.faq.forEach(item => {
  // 将< >重新转义为&lt; &gt;
  item.answer = item.answer.replace(/</g, '&lt;').replace(/>/g, '&gt;');
});

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