Блог

Я пытаюсь реализовать плоский список, который отображает изображения из массива (который я извлек из своей базы данных firebase RTDB, но это не имеет значения). Код, в котором я реализую плоский список, находится здесь:

 <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 до конца и отображать каждый элемент). Я пробовал несколько методов реализации ключевых свойств, и все же я не могу найти решение, которое приводит к определенному свойству «data».

Возможно, кто-то, кто лучше понимает плоские списки в react native / expo, может мне здесь помочь? Я рассмотрел практически каждый соответствующий поток в StackOverflow, и в документации несколько неясно, как использовать ключевое свойство, поскольку оно относится к итерации массива.

Аргумент, который передается renderItem обработчику, состоит из объекта, а фактический элемент (в данном случае ваш объект изображения) находится в item свойстве этого объекта. Просто измените параметр destructured на следующий, и он должен работать:

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

Обратите внимание, что в целях повышения производительности обычно рекомендуется переместить этот реквизит в функцию компонента, а не передавать встроенную функцию.