如何在 Flat List React Native 中呈现 XML

如何解决如何在 Flat List React Native 中呈现 XML

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

从 here 获取 XML 格式的数据
使用 react-native-xml2js 将其转换为 JSON
在 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(result) 呈现的 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",}

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

解决方法

试试下面可能有帮助的代码：

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