FlatList 不显示其数据 React Native

Question

大家好，我正在尝试将对象中的数据显示到我的平面列表中

import {ItemLists} from '../data/ItemLists';

const ListItem = ({item}) => {
    return (
      <View style={{margin: 10}}>
          <Image source={{
            uri: item.uri,
          }}
          style={{width:200,height:200}}
          resizeMode="cover"
          />
          <Text style={{margin:5}}>{item.text}</Text>
      </View>
    )
  };

这是我的虚拟数据

export const ItemLists = [
    {
        title: 'Hot Deals',
        data: [
            {
                "key": 1,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-01"
            },
            {
                "key": 2,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-02"
            },
            {
                "key": 3,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-03"
            },
            {
                "key": 4,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-04"
            },
            {
                "key": 5,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-05"
            },
            {
                "key": 6,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-06"
            },
            {
                "key": 7,
                "text": "Title of Food",
                "uri": "../../Assets/Images/featured-restau-07"
            }
        ]
    }
];

下面是我如何使用 FlatLis

<ScrollView>
//... other codes
//... other codes

<View style={styles.HotDealsContainer}>
      <View style={styles.HotDealItemContainer}>
           <Text style={styles.HotDealTitle}>Hot Deals</Text>
           <View style={styles.HotDealsItem}>
                  <FlatList
                    horizontal 
                    data={ItemLists}
                    keyExtractor={(item) => item.key}
                    renderItem={({item}) => <ListItem item {...item}/>}
                  />
          </View>
     </View>
</View>
</ScrollView>


HotDealsContainer:{
    width:'100%',
    height:200,
    backgroundColor: 'green',
  },
  HotDealItemContainer:{
    marginTop: -135,
    marginLeft: 20,
    width:Dimensions.get('window').width / 2 * 2 - 40,
    height:150,
    backgroundColor: 'blue',
  },
  HotDealsItem:{
    flex:1,
    justifyContent:'space-between',
    flexDirection:'row',
  },
  HotDealTitle:{
    color:'#000',
    fontSize:18,
    fontWeight: 'bold',
  },

我现在面临的问题是它不会在屏幕上显示任何东西。有人可以指出我做错了什么吗？

Answer 1

您的 ItemLists 只有一项，其中包含 title 和数据 array。如果您想呈现该数据，您只需传递该数组：

            <FlatList
                horizontal 
                data={ItemLists[0].data}
                keyExtractor={(item) => item.key}
                renderItem={({item}) => <ListItem item {...item}/>}
              />

我注意到的第二个问题是您没有将项目属性传递给。接下来你要做的是：

<ListItem item={item} />

出于可读性目的，将该数据数组存储在单独的变量中而不是存储在另一个数组中的对象中会更好

FlatList 不显示其数据 React Native

FlatList not showing its data React Native

react-router

react-native

react-native-flatlist

react-hooks