如何在 react-native 中將 xml 顯示為 html？

Question

我有包含 html 內容的 XML 文檔。 如何在 react native 中將 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>
  );
}

認為是將 XML 轉換為 html 並使用react-native-render-html或任何第三方庫在 react native 中渲染 html。

謝謝提前:)

Answer 1

React Native 文檔目前推薦 React Native WebView：

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

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

如果您不想嵌入 WebView，也有第三方庫可以將 HTML 渲染為原生視圖：

react-native-render-html 反應-native-htmlview

Answer 2

要將 xml 轉換為 html，您可以使用 parseXML 函數，在顯示之后，我們可以使用包“react-native-webview”中的 webview 來顯示如下所示的內容。

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