Отображение нескольких изображений в Swiper

Question

Я пытаюсь сохранить изображения в swiper, используя фотографии, хранящиеся в базе данных. Изображение ниже - это формат моей базы данных. Я использую список для хранения фотографий и их отображения, получая base64. Я могу получить только первое изображение. Я попытался использовать для l oop для отображения нескольких изображений, но безуспешно.

</View >
        <ScrollView onScroll={this.handleScroll}>
          {this.state.images.map((u, i) => {
            if ((this.state.images).length != 0) {
              return (
              <Swiper
                renderPagination={renderPagination}
                horizontal={true}
                loop={false}
                key={i}
              > 
              <View style={styles.slide}>
              <Image
               style={styles.image}
               source={(u.photos != undefined && (u.photos).length != 0) ? {uri: "data:image/png;base64," + u.photos[0].base64} : require('../img/Pictogram.png')}
              />
              </View>
              </Swiper>
              );
            }
          })}
        </ScrollView>
      </View>

Я попытался отобразить несколько изображений, выполнив это : - Создание функции, которая хранит код выше - и внутри рендеринга я сделал

for (var i=0; i < (u.photos).length; i++) {
    this.new_function;
}

, но я получаю ошибку

Answer 1

Вы можете использовать условие следующим образом:

<View>
//... so do 0 and 1
    {(u.photos).length >= 2)?
      <Image
          style={styles.image}
          source={(u.photos != undefined && (u.photos).length != 0) ? {uri: "data:image/png;base64," + u.photos[1].base64} : require('../img/Pictogram.png')}
       />  
      :  null;
     }
     {(u.photos).length >= 3)?
      <Image
          style={styles.image}
          source={(u.photos != undefined && (u.photos).length != 0) ? {uri: "data:image/png;base64," + u.photos[2].base64} : require('../img/Pictogram.png')}
       />  
      :  null;
     }

//.... and so on to 5 image

</View>

И проблема не возникнет.

Возможно, это не лучшее решение, но поскольку у вас есть только пять изображений, я думаю, что это может сработать.