遍历数组对象显示多张图片

Question

我正在尝试遍历 "photo" 数组中的所有 "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>

            )}
          />
``

Answer 1

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