React-Native 获取 XML 数据

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

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

Answer 2

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

var DOMParser = require('xmldom').DOMParser

我将它用于我的项目。

Answer 3

首先 - React Native 使用 JavaScriptCore，它只是一个 javascript 解释器，所以没有浏览器对象模型，没有文档对象，没有 window，等等。那是例如，您不能使用 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

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

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

希望对您有所帮助！

Answer 5

我用的是react-native，不太喜欢xmldom。我写了自己的 react-native XML 解析器。你可以检查它 https://www.npmjs.com/package/react-xml-parser

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

我将它用于我的项目。

Answer 7

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

第一个包是 - React Native XML2JS The reason for using it and not XML2JS is I was getting an error of React Native not supporting node standard library。（我也在使用 expo。）

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

Answer 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;

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

React-Native 获取 XML 数据

React-Native fetch XML data

javascript

xml

json

reactjs

react-native