React Native中如何解析XML并渲染其中包含的HTML内容？

你现有代码无法运行的核心原因有三点：

• React Native 不存在浏览器环境的document全局对象，代码中document.head、ref.current.innerHTML这类DOM操作在RN环境下无对应实现，会直接抛出异常。
• 异步请求返回的XML解析结果没有同步更新到RenderHtml绑定的数据源中，组件无法拿到拉取到的内容。
• 你没有对XML节点中提取的内容做适配处理，直接操作DOM插入的逻辑完全不符合RN的渲染逻辑。

不需要模拟浏览器DOM环境，直接提取XML节点内的有效HTML片段，拼接为完整HTML字符串后传给渲染组件即可，具体步骤：

1. 安装兼容RN环境的依赖包：

   npm install @xmldom/xmldom react-native-render-html axios
   

2. 修正后的可运行代码：

   import React, { useEffect, useState } from 'react';
   import { View, ScrollView } from 'react-native';
   import { useWindowDimensions } from 'react-native';
   import axios from 'axios';
   import { DOMParser } from '@xmldom/xmldom';
   import RenderHtml from 'react-native-render-html';
   
   export default function App() {
     const { width } = useWindowDimensions();
     const [htmlContent, setHtmlContent] = useState(`<p style='text-align:center;'>Hello World!</p>`);
   
     useEffect(() => {
       const domParser = new DOMParser();
       axios.get(
         'https://uhf.microsoft.com/en-US/shell/xml/MSIrelandsFuture?headerId=MSIrelandsFutureHeader&footerid=MSIrelandsFutureFooter',
         {
           headers: {
             'Content-Type': 'application/xml; charset=utf-8',
           }
         }
       ).then(response => {
         const xmlDoc = domParser.parseFromString(response.data, 'text/xml');
         // 提取XML对应节点的文本内容，做非空兜底
         const cssBlock = xmlDoc.querySelector('cssIncludes')?.textContent || '';
         const headerBlock = xmlDoc.querySelector('headerHtml')?.textContent || '';
         const footerBlock = xmlDoc.querySelector('footerHtml')?.textContent || '';
         // 拼接为完整HTML字符串
         const assembledHtml = `${cssBlock}<div class="content-container">${headerBlock}${footerBlock}</div>`;
         setHtmlContent(assembledHtml);
       }).catch(err => console.log('XML解析请求失败:', err));
     }, []);
   
     return (
       <ScrollView style={{ flex: 1 }}>
         <View style={{ marginTop: 79 }} />
         <RenderHtml
           contentWidth={width}
           source={{ html: htmlContent }}
           tagsStyles={{
             p: { marginVertical: 8, lineHeight: 22 },
             a: { color: '#0066CC' }
           }}
         />
       </ScrollView>
     );
   }
   

• XML节点中的javascriptIncludes内容不要加入渲染字符串，react-native-render-html不支持执行网页JS逻辑，相关交互需要用RN原生能力单独实现。
• 如果提取出的HTML片段存在转义字符、自定义标签，可在拼接前做一次文本清洗，避免解析报错。
• 编写样式时不要使用浏览器专属CSS属性（如float、position: fixed），仅使用react-native-render-html兼容的样式属性即可保证渲染效果。

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