0

我正在尝试实现一个平面列表，它显示来自数组的图像（我从我的 firebase RTDB 中提取，但这没关系）。我实现 FlatList 的代码在这里：

<FlatList
    data = {poi_obj.images}
    renderItem = {({ image }) => (<Image source = {{uri: `data:image/jpeg;base64,${image.data}`}} style = {{flex: 1}} />)}
    horizontal = {true}
    initialNumToRender = {1}
/>

和图像数组（poi_obj.images）我已经格式化如下：

[
{data: 'base64-string-blah-blah', type: 'image'}
{data: 'another-b64-string-woohoo', type: 'image'}
]

我 100% 肯定这是它的格式，因为我在尝试 FlatList 定义之前将它记录到控制台。type 属性是为了让我以后可以添加视频支持，但现在这并不重要。

我收到一个错误，表明image.data未定义。阵列中暂时只有一个图像用于测试目的。

我的理解：文档有点不清楚，但似乎在遍历图像列表时，它将执行renderItem使用数组的每个项目下定义的函数（在我的情况下填充{ image }参数）。提到了一个关键属性，但似乎这是可选的，如果省略，库将默认使用索引（本质上是按从索引 0 到末尾的顺序遍历数组，并渲染每个项目）。我尝试了多种实现关键属性的方法，但我找不到导致定义的“数据”属性的解决方案。

也许对 react native/expo 中的 FlatLists 有更好理解的人可以在这里帮助我？我已经查看了 StackOverflow 上的几乎每个相关线程，文档对于 key 属性的使用有些不清楚，因为它与数组迭代有关。

4

1 回答 1

1

传递给renderItem处理程序的参数由一个对象组成，而实际项目（在本例中为您的图像对象）位于item该对象的属性中。只需将 destructured 参数更改为以下内容，它应该可以工作：

renderItem = {({ item }) => ...

请注意，出于性能目的，通常建议将此道具移动到组件上的函数中，而不是传递内联函数。

于 2020-12-30T23:50:58.063 回答