Question

我试图遍历“照片”数组中的所有“ URL”，并将其显示在我的本机应用程序的提要页面上。这就是我在待办清单中的方法：

                    <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，因为您的对象是这样命名的。

遍历数组对象以显示多个图像

1 个答案: