Question

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

当我做var arr = []; $('.div1').each(function(i, obj) { var value = $(this).find('div').attr("class"); if (typeof value === "undefined") { value = 0; } arr.push(value); }); alert(JSON.stringify(arr));时，这就是我得到的

console.log("CONSOLE.LOG --> Snapshot is: ", snapshot.val())

我可以使用这样的Flatlist来呈现“作者”，“标题”，“发布”和“投票”：

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,
  },
}

但是我不明白如何在“照片”中的3个“ url”中循环浏览

          <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>
            )}
          />

^不加载任何图像

Answer 1

您将需要遍历photo对象的值，并为其中的每个 photoItem 创建Image组件。像这样的事情可能会起作用，

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

希望有帮助！

React-Native：使用snapshot.val（）显示/渲染多个图像

1 个答案: