[英]How to display xml to html in react-native?
I had XML documents that contains html content.我有包含 html 内容的 XML 文档。 How do I render xml to html in react native.I've even tried with react also it was failing.如何在 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>
);
}
Think is convert the XML to html and render html in react native using react-native-render-html
or any third party libraries.认为是将 XML 转换为 html 并使用react-native-render-html
或任何第三方库在 react native 中渲染 html。
Thanks Advance :)谢谢提前:)
The React Native docs currently recommend React Native WebView: React Native 文档目前推荐 React Native WebView:
<WebView
originWhitelist={['*']}
source={{ html: '<p>Here I am</p>' }}
/>
https://github.com/react-native-webview/react-native-webviewhttps://github.com/react-native-webview/react-native-webview
If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:如果您不想嵌入 WebView,也有第三方库可以将 HTML 渲染为原生视图:
react-native-render-html react-native-htmlview react-native-render-html 反应-native-htmlview
To convert the xml to html you use parseXML function and after do display we can use webview from package "react-native-webview" to display the content like below.要将 xml 转换为 html,您可以使用 parseXML 函数,在显示之后,我们可以使用包“react-native-webview”中的 webview 来显示如下所示的内容。
fetch('url')
.then(data=>{
data = $.parseXML(data);
console.log(data);
})
.catch((err)=>{
console.log(err);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.