在 React Native 中获取并填充 XML 数据
简介 XML（可扩展标记语言）是使用标记标签对文档和数据进行编码的著名格式之一。XML 将每部分数据包装在具有以下值的特定自定义关键标签中：
<person>
<fname>Pavneet</fname> <!--first name-->
<lname>Singh</lname> <!--last name-->
</person>
XML 文档在 Android 中被广泛用于创建 UI 布局，可用于通过 React Native 中的原生模块提供原生界面支持。XML 也是使用SOAP协议构建的 API 唯一支持的数据传输格式。
本指南提供了在 React Native 中下载和解析 XML 文档的实现细节。
安装依赖项
实现 API 请求的基本要求可以分为三个关键步骤：数据源、网络 API 模块和解析 API 模块（可选）：
设置数据源
第一步是设置模拟 XML 响应数据，这可以通过创建 GitHub gist 轻松完成。创建一个包含一个 XML 响应文件的 gist，如下所示。
笔记
- 任何 GitHub 帐户都可以复制并使用 Gist。Gist 文件中的任何更改都会产生新的原始 URL。
- 还可以使用mocky创建自定义模拟响应。或者，你可以使用gorest mock API 获取虚假帖子 XML 数据。
网络模块
React Native 提供了内置的fetch API 来进行网络调用，因此无需安装任何其他依赖项。或者，还有其他 HTTP 客户端可用，例如XMLHttpRequest (内置)、Frisbee、axios、superagent和request。
当前版本的axios尝试自动将响应转换为 JSON对象，但这种行为将来可能会发生变化。
解析模块
React Native 没有提供任何用于解析 XML 数据的内置模块，因此将使用fast-xml-parser来解析 XML 响应。将其作为依赖项安装：
npm install fast-xml-parser typescript
需要 typescript 包来修复类型警告。
还有许多其他第三方解决方案可用，但它们也有一些缺点：
- xml2js是用于解析 XML 的流行库之一，但它需要额外的依赖项（事件、计时器等）才能与 React Native 一起使用。
- jsdom是一个功能齐全的 DOM 创建和解析库，最适合 DOM 操作。
- xmldom是一个基于 W3C 标准的配对库，但在撰写本文时，它不能很好地处理注释，并且会因 XML 注释而对未关闭的标签发出警告。
此外，还有一些可用的 React Native 特定库：
- react-native-xml2js是一个专门为 React Native 修改的 React 库。它不再被维护，但可以作为最后的手段。
- react-xml-parser是一个轻量级的 XML 解析器，但它仅限于getElementsByTag函数，并且不能很好地处理 XML 注释。
下载 XML 响应
要从 gist 下载 XML 数据，请右键单击原始按钮复制 GitHub gist 的原始URL ，然后复制链接：
只需使用fetch (input: RequestInfo)即可执行 fetch API 调用，其中RequestInfo可以是字符串 URL：
fetch('https://gist.githubusercontent.com/Pavneet-Sing/d0f3324f2cd3244a6ac8ffc5e8550102/raw/8ebc801b3e4d4987590958978ae58d3f931193a3/XMLResponse.xml')
.then((response) => response.text())
.then((textResponse) => console.log('response is ', textResponse))
.catch((error) => {
console.log(error);
});
上述fetch调用将返回一个Promise，该 Promise 与then调用相结合以处理异步响应。text ()函数调用还返回Promise对象，该对象与另一个then函数相结合以记录文本响应。可以使用async/await简化上述代码：
async getXMLResponse() {
const response = await fetch('https://gist.githubusercontent.com/Pavneet-Sing/3a69eb13677eba270264579bf0aa2121/raw/8a7cddd4c4dad77ba09f9e59e97b87cc04cf09fa/ParseXMLResponse.xml')
console.log('response is', await response.text());
}
async/await不处理错误，因此应使用try/catch块来处理await执行中的任何潜在错误。
解析 XML 数据
fast-xml-parser库提供了一种使用parse函数解析字符串 XML 响应的便捷方法。parse函数将 XML 响应文本转换为JSON对象，从而允许直接访问已解析的 JSON 对象的属性以获取数据：
import { parse } from 'fast-xml-parser';
getXMLResponse = () => {
fetch('https://gist.githubusercontent.com/Pavneet-Sing/d0f3324f2cd3244a6ac8ffc5e8550102/raw/8ebc801b3e4d4987590958978ae58d3f931193a3/XMLResponse.xml')
.then((response) => response.text())
.then((textResponse) => {
let obj = parse(textResponse);
let fname = obj.person.fname;
let lname = obj.person.lname;
let phone = obj.person.contacts.personal.phone;
this.setState({ fname: fname, lname: lname, phone: phone })
})
.catch((error) => {
console.log(error);
});
}
parse (textResponse)函数调用会将 XML 文本响应转换为对象，并使用属性名称（如obj.person.fname ）提取数据。解析后的数据将使用setState函数存储在状态中，以在 UI 上显示响应。用于在 UI 上显示数据的优化 React Native 代码可在我的RNParseXML存储库中找到。
结论
将XML解析为 JSON 对象提供了极大的灵活性，可以直接使用属性访问数据。可以轻松遍历对象以解析嵌套数组或对象。React Native 提供了许多内置的 React API（如fetch、async/await等），但不支持所有 React 库，因此建议始终在 Android 和 iOS 平台上测试实现。祝您编码愉快！
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~