Question

我是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>
    );
  },
});

Answer 1

您可以尝试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)
        })

我将它用于我的项目。

Answer 2

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

var DOMParser = require('xmldom').DOMParser

我将它用于我的项目。

Answer 3

首先 - 使用JavaScriptCore React Native，它只是一个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

Answer 4

看起来你无法获得XML，但你可以获得原始文本;使用response.text()代替response.json()。你仍然需要将文本处理成xml

Answer 5

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

Answer 6

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

第一个软件包是-React Native XML2JS，而不是XML2JS的原因是我遇到了React Native not supporting node standard library的错误。（我也正在使用EXPO。）

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

Answer 7

这是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;

Answer 8

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)
    })

Answer 9

在我发现我可以这样做之前花了几个小时我遇到了同样的问题：

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());

希望它有所帮助！

React-Native获取XML数据

9 个答案: