React Native中如何将URL返回JSON的HTML内容渲染至Text组件

• 完全可以在React Native中渲染接口URL返回的JSON数据对应字段值，流程和普通前端请求接口渲染数据一致：发起请求、拿到JSON响应、解析目标字段、传入组件渲染即可。
• dangerouslySetInnerHTML是React Web端专属API，依赖浏览器DOM环境，React Native没有DOM实现，该属性在RN环境下完全无效，不要尝试使用。

1. 拉取解析接口数据 #

用RN内置的fetch或者常用请求库拉取接口数据，解析出存储富文本内容的字段即可，示例代码：

import { useEffect, useState } from 'react';
import { View, useWindowDimensions } from 'react-native';

export default function RichTextPage() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    // 替换为实际接口地址
    fetch('你的接口请求地址')
      .then(res => res.json())
      .then(resData => {
        // 提取示例结构中field字段存储的HTML字符串
        setHtmlContent(resData.field);
      })
      .catch(err => console.error('内容拉取失败', err));
  }, []);

  const { width } = useWindowDimensions();

  return (
    <View style={{ padding: 16 }}>
      {/* 后续富文本渲染组件放这里 */}
    </View>
  );
}

2. 渲染HTML格式内容 #

React Native不能直接识别HTML标签，需要把HTML标签映射为RN对应的原生组件，分两种场景处理：

生产环境方案（推荐） #

直接使用RN生态成熟的HTML渲染库完成解析渲染，这类库会自动完成标签到RN组件的映射，支持样式自定义、嵌套标签解析、图片/链接等元素渲染，不需要自己写解析逻辑，稳定性远高于手动实现。
以社区广泛使用的react-native-render-html为例，只需要把拿到的HTML字符串传入组件，即可自动渲染为原生组件，还可以通过配置自定义各标签的样式，匹配你的设计要求：

// 引入渲染组件和基础Text组件
import { Text } from 'react-native';
import RenderHtml from 'react-native-render-html';

// 在刚才的组件return中替换为以下内容
return (
  <View style={{ padding: 16 }}>
    <RenderHtml
      contentWidth={width}
      source={{ html: htmlContent }}
      defaultTextProps={{ selectable: true }}
      // 自定义各标签样式，对应你示例中的h2、p标签
      tagsStyles={{
        h2: { fontSize: 22, fontWeight: '700', marginVertical: 12 },
        p: { fontSize: 16, lineHeight: 24, marginVertical: 8 }
      }}
    />
  </View>
);

该方案渲染出的内容全部是RN原生组件，不依赖WebView，性能和手写原生RN组件一致，也完全不需要用到dangerouslySetInnerHTML。

极简固定结构场景（不推荐生产使用） #

如果你的返回HTML结构极其固定，只有少量已知标签、无复杂嵌套和特殊内容，也可以自己写简单的解析逻辑做标签替换，但是遇到嵌套标签、行内样式、特殊字符时很容易出bug，仅适合临时简单场景使用：

// 仅适配示例中<h2>、<p>标签的极简解析逻辑
function parseFixedHtml(htmlStr) {
  const renderList = [];
  let restStr = htmlStr;
  let itemKey = 0;

  while (restStr.length) {
    if (restStr.startsWith('<h2>')) {
      const endPos = restStr.indexOf('</h2>');
      const h2Text = restStr.slice(4, endPos);
      renderList.push(
        <Text key={itemKey++} style={{ fontSize: 22, fontWeight: '700', marginVertical: 12 }}>
          {h2Text}
        </Text>
      );
      restStr = restStr.slice(endPos + 5);
      continue;
    }
    if (restStr.startsWith('<p>')) {
      const endPos = restStr.indexOf('</p>');
      const pText = restStr.slice(3, endPos);
      renderList.push(
        <Text key={itemKey++} style={{ fontSize: 16, lineHeight: 24, marginVertical: 8 }}>
          {pText}
        </Text>
      );
      restStr = restStr.slice(endPos + 4);
      continue;
    }
    // 兜底渲染剩余内容
    renderList.push(<Text key={itemKey++}>{restStr}</Text>);
    break;
  }
  return renderList;
}

注意：不要用正则全局替换HTML标签做渲染，正则无法正确处理HTML的嵌套结构，遇到复杂内容必然出现解析错误。

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