web-dev-qa-db-ja.com

React-NativeフェッチXMLデータ

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>
    );
  },
});
javascriptxmljsonreactjsreact-native
22
Toon

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

私は自分のプロジェクトにそれを使用します。

12
lam luu

npm install xmldomを使用できます。次のようにDOMParserをロードします。

var DOMParser = require('xmldom').DOMParser

私は自分のプロジェクトにそれを使用します。

5
kai

まず第一に-ReactネイティブJavaScriptインタプリタであるJavaScriptCoreを使用しているため、ブラウザオブジェクトモデル、ドキュメントオブジェクト、ウィンドウなどはありません。これが理由です。たとえば、DOMParserは使用できません。

Indeed 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
2
Artem Yarulin

反応ネイティブを使用していますが、xmldomはあまり好きではありませんでした。独自の反応ネイティブXMLパーサーを作成しました。 https://www.npmjs.com/package/react-xml-parser で確認できます

1
Matansh

xMLを取り戻すことはできないように見えますが、生のテキストは得ることができます。 response.text()の代わりにresponse.json()を使用します。あなたはまだテキストをxmlに処理する必要があります

1
Aaron Saunders

2つのパッケージの組み合わせを使用しました。私の使用例では、SOAPリクエストの応答を解析する必要がありました。

最初のパッケージは- React Native XML2JS それを使用する理由であり、 XML2JS ではありません React Nativeはノード標準ライブラリをサポートしていません =。 （私もexpoを使用しています。）

解析に実際に使用した2番目のパッケージは、- XML-JS です。 React Nativeはノード標準ライブラリをサポートしていないネイティブと同じエラーが発生したため、最初のパッケージを使用する必要がありました。大きなXML応答の場合により構造化された結果が得られたため、これを使用しました。

0
Sahil Khurana