Json 如何在平面列表中显示XML

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

从中获取XML格式的数据

使用

在平面列表中显示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>
  );
}

---

但我不确定如何将其纳入我的单一列表。任何帮助都将不胜感激！谢谢。

请尝试以下代码：

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

import React，{useffect，useState}来自“React”；
从“react native”导入{FlatList，SafeAreaView，Text，View}；
从'react-native-xml2js'导入{parseString}；
导出默认函数App（）{
const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
useffect（（）=>{
var url='1〕http://www.xmltv.co.uk/feed/9437';
获取（url）
.然后（（response）=>response.text（））
.然后（（responseText）=>{
parseString（responseText，（u2;，result）=>{
setData（结果电视频道）；
});
})
.catch（（错误）=>{
log（'获取提要时出错：'，错误）；
})
.最后（（）=>setLoading（false））；
}, []);
返回(
{孤岛加载(
加载。。。
) : (
id}
renderItem={（{item}）=>{item['display-name'][0]}
/>
)}
);
}

FYI，我已经使用命令

warn add react-native-xml2js

安装了npm模块。这非常有效-谢谢！

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