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 解释器，所以没有浏览器对象模型、没有文档对象、没有窗口等。这就是为什么你不能使用 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 使用它而不是XML2JS 的原因是我收到了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)
    })