react-native-render-html中外联样式无法正确渲染问题求助

问题背景 #

使用react-native-render-html组件渲染API返回的HTML内容时，HTML结构能正常展示，但外联的CSS样式完全不生效。API返回的JSON示例如下：

{
    "title": "Testing Bootstrap styling",
    "preview": "Ini lagi testing bootstrap styling",
    "body":"<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width,initial-scale=1'><link href='https://cdn.jsdelivr.net/gh/klikcair/digitalcommunitylabs-system-notification-template/style.css' rel='stylesheet' integrity='sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi' crossorigin='anonymous'><title>DCB Notification - Ayo Aktivasi</title></head><body><div class='wrapper'><h1 class='title title-primary'>Ayo Aktivasi Sekarang</h1><div class='content'><p>Selamat bergabung. Ayo aktivasi sekarang untuk menikmati berbagai fitur andalan.</p><ul><li><b>Setor dan Transfer</b><p>Kirim dana antar rekening atau antar bank.</p></li><li><b>Cek mutasi</b><p>Telusuri transaksi dengan mudah.</p></li><li><b>Akunmu lebih aman</b><p>Datamu aman dan terenkripsi.</p></li></ul></div></div></body></html>",
    "bodyType": "HTML",
    "tags": [
        "Keanggotaan"
    ]
}

实际渲染时仅展示纯文本结构，无任何排版、颜色样式；预期应为带有标题样式、列表间距、内容排版的通知页面。

解决方案 #

react-native-render-html默认不会自动加载并解析HTML中的外联<link>样式，需要手动获取CSS内容并注入到组件中，具体步骤如下：

1. 手动获取外联CSS并注入 #

通过网络请求获取外联CSS的文本内容，然后传递给RenderHtml组件的source.css属性：

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import RenderHtml from 'react-native-render-html';

const HtmlContentRenderer = ({ htmlString, cssUrl }) => {
  const [externalCss, setExternalCss] = useState('');

  useEffect(() => {
    const fetchExternalCss = async () => {
      if (!cssUrl) return;
      try {
        const response = await fetch(cssUrl);
        const cssText = await response.text();
        setExternalCss(cssText);
      } catch (err) {
        console.error('加载外联CSS失败:', err);
      }
    };

    fetchExternalCss();
  }, [cssUrl]);

  return (
    <View style={styles.container}>
      <RenderHtml
        contentWidth={350} // 根据设备屏幕宽度调整
        source={{
          html: htmlString,
          css: externalCss,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
});

export default HtmlContentRenderer;

2. 自动提取HTML中的外联样式URL（可选） #

如果API返回的HTML中包含多个外联样式，可以通过正则表达式提取所有<link>标签的href属性，批量获取CSS：

// 从HTML字符串中提取所有外联样式URL
const extractCssUrls = (html) => {
  const linkRegex = /<link[^>]+href="([^"]+)"/g;
  const urls = [];
  let match;
  while ((match = linkRegex.exec(html)) !== null) {
    urls.push(match[1]);
  }
  return urls;
};

// 在组件中批量获取并合并CSS
useEffect(() => {
  const fetchAllCss = async () => {
    const urls = extractCssUrls(htmlString);
    if (urls.length === 0) return;
    const cssPromises = urls.map(url => fetch(url).then(res => res.text()));
    const cssTexts = await Promise.all(cssPromises);
    setExternalCss(cssTexts.join('\n'));
  };

  fetchAllCss();
}, [htmlString]);

3. 兼容性注意事项 #

• 确保外联CSS的服务器允许跨域请求（CORS），否则会导致请求失败
• react-native-render-html对CSS的支持有限，部分复杂选择器（如伪类、媒体查询）可能无法完全兼容，需要根据实际效果调整CSS内容

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