Добавьте последний элемент в конец FlatList
Я пытаюсь добиться следующего, тогда как все, кроме последнего, являются обычными изображениями, поступающими из массива.
В настоящее время это код для FlatList:
<FlatList
data = {images}
numColumns = {3}
// ListFooterComponent = {
// <View style = {[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
// <Image source = {require('../../../images/add-icon.png')} />
// </View>}
renderItem = { ({item, index}) => index == images.length -1 ?
<View style = {{flexDirection: 'row'}}>
<Image style = {[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source = {{uri: item.url}} />
<View style = {[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
<Image source = {require('../../../images/add-icon.png')} />
</View>
</View>
: <Image style = {[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source = {{uri: item.url}} /> }
keyExtractor = {(item, index) => index.toString()}
/>
Короче говоря, отображает изображения в массиве в таблице из 3 столбцов и проверяет последнее изображение в списке, и в дополнение к отображению изображения он также отображает этот знак плюс.
Однако это обязательно приведет к какой-то ошибке, если количество элементов в списке кратно 3, поскольку знак плюса, скорее всего, будет за пределами экрана. Если я использую ListFooterComponent, он отображает его в совершенно новой строке.
Кто-нибудь знает эффективную работу вокруг этого?
Ответы 2
Поскольку я не думаю, что выразился достаточно ясно, я попытаюсь правильно объяснить свою идею с помощью этого примера кода:
<FlatList
data = {[...images, { plusImage: true }]}
numColumns = {3}
renderItem = {({ item }) => {
if (item.plusImage) {
return (
<View
style = {[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
>
<Image source = {require("../../../images/add-icon.png")} />
</View>
);
}
return (
<Image
style = {[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
source = {{ uri: item.url }}
/>
);
}}
keyExtractor = {(item, index) => index.toString()}
/>;
Я не знаю, лучше ли объединять такой массив данных непосредственно в реквизите data, но вы всегда можете объявить его раньше в методе рендеринга.
Дайте мне знать, если это может соответствовать вашему запросу.
большое спасибо! Я хотел сделать именно это, но не очень разбирался в javascript (3 точки и конкатенация). Я не знал, как это сделать! Я проверю, как это происходит, и, возможно, проверю это как правильный ответ :)
Пожалуйста! Это называется оператором распространения, очень полезным в мире реагирования (и js в целом)
@Milore Отличный ответ !! Спасибо Милоре. +1 плюс от меня.
Это не элегантное решение. React Native должен был предоставить список данных в качестве параметра функции renderItem.
Я также столкнулся с той же ситуацией и нашел хороший способ, когда я проверил документацию FlatList, поэтому лучший способ, который я рекомендую, - это использовать ListFooterComponent, вы можете передать объект стиля для этот элемент с помощью ListFooterComponentStyleНажмите здесь, чтобы узнать больше.
Как вы можете прочитать в вопросе @Yokhen: Если я использую ListFooterComponent, он отображает его в совершенно новой строке.. Вот почему я написал это решение.
Что ж, я думаю, что есть вариант стиля, ListFooterComponentStyle, так что вам не нужно беспокоиться о стиле.
Это необходимо, если вы хотите визуализировать компоненты от разных родителей в сетке, что, насколько я знаю, невозможно.
Как насчет того, чтобы добавить его как реальный элемент вашего массива изображений и обработать его рендеринг в условии внутри свойства renderItem?