如何将xml显示为html？

Question

我有包含html内容的XML文档。我如何将xml呈现为html的，我甚至尝试了react，它也失败了。

import React, { useEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import { useWindowDimensions } from 'react-native';
import axios from 'axios';
import { DOMParser } from 'xmldom';
import RenderHtml from 'react-native-render-html';

export default function App() {
  const { width } = useWindowDimensions();
  const ref = useRef(null);
  const [xml, setXml] = useState(`
  <p style='text-align:center;'>
    Hello World!
  </p>`);

  const source = {
    html: xml,
  };

  const appendToNode = (node, content) => {
    node.innerHTML += content;
  };

  useEffect(() => {
    const DOMParse = new DOMParser();
    let xmlDoc;
    axios
      .get(
        'https://uhf.microsoft.com/en-US/shell/xml/MSIrelandsFuture?headerId=MSIrelandsFutureHeader&footerid=MSIrelandsFutureFooter',
        {
          'Content-Type': 'application/xml; charset=utf-8',
        },
      )
      .then(response => {
        xmlDoc = DOMParse.parseFromString(response.data, 'text/xml');
        appendToNode(
          document.head,
          xmlDoc.querySelector('cssIncludes').textContent,
        );
        appendToNode(
          document.head,
          xmlDoc.querySelector('javascriptIncludes').textContent,
        );
        appendToNode(
          ref.current,
          xmlDoc.querySelector('headerHtml').textContent,
        );
        appendToNode(
          ref.current,
          xmlDoc.querySelector('footerHtml').textContent,
        );
      })
      .catch(err => console.log(err));
  }, []);
  console.log('REFFFF', ref);
  return (
    <View style={{ flex: 1 }}>
      <View style={{ marginTop: 79 }} />
      <RenderHtml contentWidth={width} source={source} />
    </View>
  );
}

Think是使用react-native-render-html或任何第三方库将XML转换为html并在本机反应中呈现html。

谢谢预支:)

Answer 1

Resive原住民文档目前推荐：

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

如果不想嵌入WebView，也有第三方库将HTML呈现到本机视图中：

本机-渲染-html反应-本机-htmlview

Answer 2

要将xml转换为html，您可以使用parseXML函数，在do显示之后，我们可以使用webview包“react本机-webview”显示如下所示的内容。

fetch('url')
  .then(data=>{
    data = $.parseXML(data);
    console.log(data);
  })
  .catch((err)=>{
    console.log(err);
  });