遍历 Array Object 以显示多个图像答案

【问题标题】：Iterating through Array Object to display multiple images遍历 Array Object 以显示多个图像
【发布时间】：2019-11-23 03:36:03
【问题描述】：

我正在尝试遍历“照片”数组中的所有“url”并将其显示在我的 react 本机应用程序的提要页面上。这就是我在平面列表中的做法：

                    <View>
                    {
                      (item.photo).map(photoItem => (
                        <Image 
                          source={{ uri: photoItem.url }}
                        />
                      )) 
                    }
                    </View>

对象如下所示：

photo_feed is:  Array [
  Object {
    "author": "Jack",
    "authorId": "edm9AAbPpFUWrO9HDXfV442QzSE2",
    "caption": "Test 1",
    "id": "55a3-ba48-6709-ccf4-3338",
    "posted": "29 minutes ago",
    "url": Array [
      Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...some url...",
      },
      Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...some url...",
      },
      Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...some url...",
      },
    ],
    "vote": 0,
  },
]

我能够获取该值，但无法遍历它并一次在屏幕上显示所有图像。

我收到此错误：

ReferenceError: Can't find variable: photoItem

这是完整的平面列表：

          <FlatList
            refreshing={this.state.refresh}
            onRefresh={this.loadNew}
            data={this.state.photo_feed}
            keyExtractor={(item, index) => index.toString()}
            style={{ backgroundColor: "#eee", flex: 1 }}
            renderItem={({ item, index }) => (
              <View key={index} style={styles.flatlistImage}>
                <View style={styles.postDetails}>
                  <Text>{item.posted}</Text>
                </View>
                <View>
                    <View>
                    {
                      (item.photo).map(photoItem => (
                        <Image 
                          source={{ uri: photoItem.url }}
                          style={styles.profilephoto} 
                        />
                      )) 
                    }
                    </View>
                </View>
              </View>

            )}
          />
``

【问题讨论】：

标签： firebase react-native object firebase-realtime-database react-native-flatlist

【解决方案1】：

它应该是 item.url 而不是 item.photo，因为你的对象是这样命名的。

【讨论】：