Добавьте последний элемент в конец FlatList - PullRequest
Новая
       10

Добавьте последний элемент в конец FlatList

0 голосов
/ 23 января 2019

Я пытаюсь добиться следующего, тогда как все, кроме последнего, являются обычными изображениями, поступающими из массива.

Images

В настоящее время это код для 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, он отображается в совершенно новой строке.

Кто-нибудь знает эффективный способ обойти это?

1 Ответ

0 голосов
/ 23 января 2019

Поскольку я не думаю, что я достаточно ясен, я попытаюсь правильно объяснить мою идею с помощью этого примера кода: 

<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 prop, но вы всегда можете объявить его раньше в методе рендеринга.Дайте мне знать, если это может соответствовать вашему запросу.

...