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

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

Answer 1

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

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

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

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

1 个答案: