Firebase React Native：使用snapshot.val（）显示/呈现多个图像

我正在尝试在我的react native应用程序提要页面中加载多个图像。我已经将它存储在数据库中，并且能够使用snapshot.val（）检索数据，但是，我不知道如何在提要屏幕上实际显示/渲染它

当我执行

console.log（“console.log-->Snapshot is:”，Snapshot.val（））

时，这就是我得到的结果

CONSOLE.LOG --> Snapshot is:  Object {
  "4aae-47bb-e0f7-36e2-7e66": Object {
    "author": "edm9AAbPpFUWrO9HDXfV442QzSE2",
    "caption": "Test 1",
    "photo": Object {
      "2e30-b971-5c62-0b68-837f": Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
      },
      "38de-15f2-bb7b-b58d-e863": Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
      },
      "94f2-1494-908f-c17a-5adc": Object {
        "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
      },
    },
    "posted": 1562901067,
    "vote": 1,
  },
}

我可以使用这样的平面列表呈现“作者”、“标题”、“发布”和“投票”：

          <FlatList
            refreshing={this.state.refresh}
            onRefresh={this.loadNew}
            data={this.state.photo_feed}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => (
              <View key={index}>
                <View>
                  <Text>{item.posted}</Text>
                  <Text>{item.author}</Text>
                </View>
                <View>
                    <Image
                      source={{ uri: item.photo }}
                    />
                </View>
                <View>
                  <Text>{item.caption}</Text>
                    <View>
                      <View>
                        <Text>Votes: {item.vote}</Text>
                      </View>
                    </View>
                </View>
              </View>
            )}
          />

index.toString（）}
renderItem={（{item，index}）=>(
{item.posted}
{item.author}
{item.caption}
表决：{项目.表决}
)}
/>

但我不明白我怎么能在“照片”中循环浏览3个“url”

^不加载任何图像

---

您需要循环查看

照片

对象的值，并为其中的每个照片项创建

图像

组件。这样可能行得通

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

{
Object.values（item.photo）.map（photoItem=>(
)) 
}

---

希望有帮助

嗨，你的回答很有道理。然而，当我实现您的解决方案时，我一直遇到这个错误：TypeError:Object.values要求输入参数不能为null或未定义。是因为item.photo是一个文件夹吗？我如何才能使其引用“照片唯一ID”（如上图所示）？谢谢因此，基本上，我需要遍历嵌套对象，如：``Object1{Object2{PropertyIwantAccess:AnotherPropertyIwantAccess:}```如上所述，上面的代码将循环遍历所有照片url值，并呈现多个

图像

组件。如果您希望访问照片唯一的id键而不是

url

值，那么您可以使用

Object.keys（item.photo）

来循环访问这些键并获取它们。

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