如何在React Native中不使用第三方库渲染HTML标签

React Native核心库没有内置通用HTML渲染组件，针对标签结构简单的新闻类HTML内容，我们可以自行实现轻量标签解析逻辑，无需引入任何第三方依赖。

实现思路 #

针对业务场景中会用到的HTML标签，逐类做正则匹配，将不同标签映射为React Native内置的View、Text等原生组件，嵌套标签可通过递归逻辑处理，最终输出可直接渲染的React节点树。

示例代码（适配你提供的列表类HTML内容） #

import { Text, View } from 'react-native';

// 可根据业务需要扩展支持的标签类型，比如p、strong、em等
const parseHtmlToRN = (htmlStr) => {
  const ulRegex = /<ul>(.*?)<\/ul>/g;
  const liRegex = /<li>(.*?)<\/li>/g;
  const renderNodes = [];
  let ulMatch;

  // 匹配所有ul列表
  while ((ulMatch = ulRegex.exec(htmlStr)) !== null) {
    const liNodes = [];
    let liMatch;
    // 匹配当前ul下的所有li条目
    while ((liMatch = liRegex.exec(ulMatch[1])) !== null) {
      liNodes.push(
        <View key={Math.random()} style={{ flexDirection: 'row', marginVertical: 4, paddingLeft: 10 }}>
          <Text style={{ marginRight: 8 }}>•</Text>
          <Text>{liMatch[1]}</Text>
        </View>
      );
    }
    renderNodes.push(<View style={{ marginVertical: 12 }}>{liNodes}</View>);
  }

  return renderNodes;
};

// 业务组件中直接调用
const NewsPage = () => {
  // 接口返回的HTML内容，你提供的示例内容翻译后如下：
  const apiContent = "<ul><li>比特币市值上涨4.6%，达到53859.6美元</li><li>周二比特币四年来首次突破5万美元大关</li><li>9月初比特币价格跌破5万美元</li>";
  
  return (
    <View style={{ padding: 16, flex: 1 }}>
      {parseHtmlToRN(apiContent)}
    </View>
  );
};

export default NewsPage;

替代方案（仅适用于RN核心库内置WebView的版本） #

如果你的React Native版本自带WebView组件（0.60以下版本核心库内置，0.60+版本可使用官方维护的react-native-webview，不属于第三方自定义库范畴），可以直接用WebView渲染，代码更简洁：

import { WebView } from 'react-native'; // 0.60+版本从react-native-webview导入

const NewsPage = () => {
  const apiContent = "<ul><li>比特币市值上涨4.6%，达到53859.6美元</li><li>周二比特币四年来首次突破5万美元大关</li><li>9月初比特币价格跌破5万美元</li>";
  return <WebView source={{ html: apiContent }} style={{ flex: 1 }} />;
};

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