React Native 中的 FlatList 实现 - renderItem 功能不清楚？ - 未定义的属性

Posted 2023-02-19

【中文标题】React Native 中的 FlatList 实现 - renderItem 功能不清楚？ - 未定义的属性

【英文标题】：FlatList implementation in React Native - renderItem functionality unclear? - undefined property

【发布时间】：2021-04-07 10:07:31

【问题描述】：

我正在尝试实现一个平面列表，它显示来自数组的图像（我从我的 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 有更好理解的人可以在这里帮助我？我已经查看了 *** 上几乎所有相关的线程，文档对于键属性的使用有些不清楚，因为它与数组迭代有关。

【参考方案1】：

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

renderItem = ( item ) => ...

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