如何在 Flat List 中呈现 XML react native

Question

我有一个 React Native 应用程序，我想：

1. 从 here
中以 XML 格式获取数据
2. 使用 react-native-xml2js
将其翻译成 JSON
3. 在 FlatList
中显示 JSON 数据

这是我的源代码

import React, { useEffect, useState } from 'react';
import { SafeAreaView, FlatList, Text, View } from 'react-native';
import {parseString} from 'xml2js'

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  console.log(data);

  useEffect(() => {
      var url = "http://www.xmltv.co.uk/feed/9437"
      fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
       parseString(responseText, function (err, result) {
         console.log(result);
        // Where do I set data?  setData(responseText);
         return result;
        });
      this.setState({
        datasource : result
        })
      })
    .catch((error) => {
      console.log('Error fetching the feed: ', error);
    })
    .finally(() => setLoading(false));
  });

  return (
    <SafeAreaView style={{ flex: 1, padding: 24 }}>
      {isLoading ? <Text>Loading...</Text> : 
      ( <View style={{ flex: 1, flexDirection: 'column', justifyContent:  'space-between'}}>
       
          <FlatList
            data={data.channel}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <Text>{item.display-name}</Text>
            )}
          />
        </View>
      )}
    </SafeAreaView>
  );
}

这是使用 console.log（结果）

呈现的 JSON 的片段

    Object {
  "tv": Object {
    "$": Object {
      "generator-info-name": "xmltv.co.uk",
      "source-info-name": "xmltv.co.uk",
    },
    "channel": Array [
      Object {
        "$": Object {
          "id": "1475611020f8d0be2662c20838ddc555",
        },
        "display-name": Array [
          "AMC from BT",
        ],
        "icon": Array [
          Object {
            "$": Object {
              "src": "/images/channels/1475611020f8d0be2662c20838ddc555.png",
            },
          },
        ],
      },
    }

但我不确定如何将它放入我的平面列表中。任何帮助将不胜感激！谢谢。

Answer 1

尝试以下可能有帮助的代码：

import React, {useEffect, useState} from 'react';
import {FlatList, SafeAreaView, Text, View} from 'react-native';
import {parseString} from 'react-native-xml2js';

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    var url = 'http://www.xmltv.co.uk/feed/9437';
    fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        parseString(responseText, (_, result) => {
          setData(result.tv.channel);
        });
      })
      .catch((error) => {
        console.log('Error fetching the feed: ', error);
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <SafeAreaView style={{flex: 1, padding: 24}}>
      {isLoading ? (
        <Text>Loading...</Text>
      ) : (
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'space-between',
          }}>
          <FlatList
            data={data ?? []}
            keyExtractor={({$: {id}}, index) => id}
            renderItem={({item}) => <Text>{item['display-name'][0]}</Text>}
          />
        </View>
      )}
    </SafeAreaView>
  );
}