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

Question

我正在尝试实现一个平面列表，它显示数组中的图像（我从我的 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 下定义的renderItem （在我的例子中填充{ image }参数）。 提到了一个关键属性，但似乎这是可选的，如果省略，库将默认使用索引（本质上是从索引 0 到末尾按顺序遍历数组，并呈现每个项目). 我已经尝试了多种实现关键属性的方法，但我找不到导致定义的“数据”属性的解决方案。

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

Answer 1

传递给renderItem处理程序的参数由一个 object 组成，实际项目（在本例中为您的图像 object）在该 object 的item属性中找到。只需将解构参数更改为以下内容，它应该可以工作:

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

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