首页 > 解决方案 > ListView React Native 中未显示的项目

问题描述

我的物品都没有显示。我记录了该项目的输出,该值是正确的,但没有显示任何内容。我看到创建了列表行,但一切都是空的。

render() {
    return this.state.foodList.length > 0 ?
      <SafeAreaView style={styles.container}>
        <FlatList
          data={this.state.foodList}
          ItemSeparatorComponent={() => <Divider style={{ backgroundColor: 'black' }} />}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item, index }) => {
            //console.log("*******************");
            //console.log(item);
            return (
              <ListItem
                containerStyle={styles.listItem}
                title={item.name}
                subtitle={`Ingredients: ${item.ingredients}     Calories: ${item.calories}`}
                titleStyle={styles.titleStyle}
                subtitleStyle={styles.subtitleStyle}
                leftAvatar={{
                  size: 'large',
                  rounded: false,
                  //source: item.image && { uri: item.image }
                }}
              />
            );
          }
          }
        />
        <Button  
          title="Go to Scan Again"  
          onPress={() => this.props.navigation.navigate('DashBoardScreen')}  
        />
      </SafeAreaView>: 
      <View style={styles.textContainer}>
        <Text style={styles.emptyTitle}>No Foods found</Text>
        <Text style={styles.emptySubtitle}>Add a new food by scanning or entering food in previous screen</Text>
      </View>
      
  }


标签: react-nativelistviewreact-native-flatlist

解决方案


推荐阅读