React-Native 获取 XML 数据

Posted 2023-02-22

【中文标题】React-Native 获取 XML 数据

【英文标题】：React-Native fetch XML data

【发布时间】：2015-06-30 14:11:38

【问题描述】：

我是 React-Native 的新手。尝试制作一些非常简单的应用程序。无法弄清楚如何获取 XML 数据。使用 JSON，一切都变得清晰而简单。

但是如何获取 XML？尝试通过this 和其他一些类似的脚本将其转换为 JSON，但没有任何成功。需要帮助：/

我的代码看起来很简单：

var xml_url = 'http://api.example.com/public/all.xml';

var ExampleProject = React.createClass(
    getInitialState: function() 
    return 
      data: results:,
    ;
  ,
  componentDidMount: function() 
    this.fetchData();
  ,
  fetchData: function() 
    fetch(xml_url)
      .then((response) => response.json())
      .then((responseData) => 
        this.setState(
          data: responseData.data,
        );
      )
      .done();
  ,

  render: function() 
    return (
      <View style=styles.wrapper>
        <View style=styles.container>
          <View style=styles.box>
            <Text style=styles.heading>Heading</Text>
            <Text>Some text</Text>
          </View>
        </View>
      </View>
    );
  ,
);

【问题讨论】：

尝试使用response.text()

对此有任何答案吗？我遇到了同样的问题。那里没有纯 JS XML 解析器吗？

【参考方案1】：

看起来您无法取回 XML，但您可以获取原始文本；使用response.text() 而不是response.json()。您仍然需要将文本处理为 xml

【讨论】：

是的，response.text() 工作正常，但是文本到 xml 的过程存在问题。例如，来自these 答案的所有解决方案都返回 null 或错误 :(

在使用新的 DOMParser() 时，我还有“找不到变量：DOMParser()”；

【参考方案2】：

你可以使用npm install xmldom，现在加载DOMParser如下：

var DOMParser = require('xmldom').DOMParser

我将它用于我的项目。

【讨论】：

有没有人尝试在 React Native 中专门使用 xmldom？

我在我的演示项目中使用它。可以参考demogithub.com/kaich/ASReact/blob/master/App/Main/TypePage.js

安卓和ios都支持吗？

@LawGimenez 今天我刚刚使用 xmldom 来处理 RSS 提要。我仍处于早期阶段，但它似乎适用于 iOS 和 android。

【参考方案3】：

首先 - React Native 使用 javascriptCore，它只是一个 javascript 解释器，所以没有浏览器对象模型、没有文档对象、没有窗口等。这就是为什么你不能使用 DOMParser 的原因。

React 确实为您提供了一个 XMLHttpRequest 包装器，但它不包括 responseXML。

我没有找到任何解决方案，所以我刚刚为此创建了自己的库：react-native-xml，它允许您解析 xml 并对其进行 XPath 查询：

let xml = require('NativeModules').RNMXml
xml.find('<doc a="V1">V2</doc>', 
         ['/doc/@a', '/doc'], 
          results => results.map(nodes => console.log(nodes[0]))) 
// Output: 
//  V1 
//  V2 

【讨论】：

非常漂亮的解决方案，但它似乎不支持Android。所以你仍然会遇到同样的问题。

【参考方案4】：

我花了几个小时才发现我可以这样做：

const GOOGLE_FEED_API_URL = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q="
let url = GOOGLE_FEED_API_URL + encodeURIComponent(<yoururl>);

fetch(url).then((res) => res.json());

希望对你有帮助！

【讨论】：

这怎么被赞成了？它回答了一个完全不同的问题。如何将 URL 作为 get 参数发送。

我认为它是使用 Google 服务将 XML 文件转换为 JSON...

【参考方案5】：

我正在使用 react-native，但我并不是很喜欢 xmldom。 我编写了自己的 react-native XML 解析器。 你可以检查一下 https://www.npmjs.com/package/react-xml-parser

【参考方案6】：

你可以试试https://github.com/connected-lab/react-native-xml2js，

    const parseString = require('react-native-xml2js').parseString;

    fetch('link')
        .then(response => response.text())
        .then((response) => 
            parseString(response, function (err, result) 
                console.log(response)
            );
        ).catch((err) => 
            console.log('fetch', err)
        )

我将它用于我的项目。

【讨论】：

截至 2019 年 2 月，这个答案似乎仍然是最相关的。您可能希望切换到 ES6 导入语法，但要跟上当前的约定： import parseString from "react-native-xml2js";

newb 问题，在 npm install react-native-xml2js 之后，我得到“找不到模块：无法解析 '/Users/me/firsttry/src/components 中的 'react-native-xml2js' '" 当我使用该导入时。

【参考方案7】：

我使用了 2 个包的组合。在我的用例中，我必须解析 SOAP 请求的响应：

第一个包是-React Native XML2JS 使用它而不是XML2JS 的原因是我收到了React Native not supporting node standard library 的错误。 （我也在使用 expo。）

我实际用于解析的第二个包是-XML-JS。我不得不使用第一个包，因为我遇到了 React Native 不支持节点标准库的相同错误。我之所以使用它，是因为它可以在大型 XML 响应的情况下提供更结构化的结果。

【参考方案8】：

这是一个使用 xml2js 的工作示例：

• responseText 是从 example.xml 获取的 .XML 数据

• 在 .then((responseText) = ) 的花括号内添加了 xml2json 脚本以将 .xml 数据解析为 Json 格式 console.log(result) 将在终端中呈现 json 格式。

旁注：如果您删除解析字符串并添加 console.log(responseText)，则输出将是 XML 格式。

    import React, Component from 'react';
    import View from 'react-native';
    import parseString from 'xml2js'



    class App extends Component 


     componentDidMount()
      this._isMounted = true;
      var url = "https://example.xml"
      fetch(url)
        .then((response) => response.text())
        .then((responseText) => 
       parseString(responseText, function (err, result) 
         console.log(result);
         return result;
        );
      this.setState(
        datasource : result
        )
       )
    .catch((error) => 
      console.log('Error fetching the feed: ', error);
    );
  



      componentWillUnMount() 
         this._isMounted = false;
      




      render()
        return(
          <View>

          </View>

        )
      
    

    export default App;

【参考方案9】：

const parseString = require('react-native-xml2js').parseString;

fetch('link')
    .then(response => response.text())
    .then((response) => 
        parseString(response, function (err, result) 
            console.log(response)
        );
    ).catch((err) => 
        console.log('fetch', err)
    )