Как l oop в MasonryList на React Native?

Question

Я хочу использовать компонент MasonryList в моем собственном реактивном проекте.

Итак, я создал такой компонент, как показано ниже:

import React, {Component} from 'react';
import {Image, StyleSheet, View, TouchableOpacity, Alert} from 'react-native';
import MasonryList from 'react-native-masonry-list';
import {books} from '../assets';

class Books extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MasonryList source={[{
          uri: '...'
        }]} />
      </View>
    );
  }
}

, поэтому реквизит "uri" ожидает ссылку для одно изображение, если вы хотите использовать несколько изображений, у вас должна быть такая структура:

{ uri: "link" }, {uri: "link2"}, {uri: "link3" } 

и т. д. *

Я импортировал книги, поэтому мой вопрос в том, как Может ли il oop в самих компонентах, чтобы достичь «миниатюры» каждого элемента, чтобы получить URL-адрес в структуре ниже?

Мои книги. js Структура файла похожа на:

export default {
       items: [
          {
           kind: "books#volume",
           id: "md5"
           volumeInfo: {
                   imageLinks: {
                          thumbnail: "

Просто я мог бы сделать отображение в функции рендеринга и создать компонент MasonryList, но это создало бы компонент столько, сколько рассчитывает l oop. Мне нужен только один компонент и несколько ссылок URI.

Answer 1

Вы можете использовать массив состояний в «исходной» структуре и в componentDidMount или в любом соответствующем месте, установить это состояние с помощью функции карты.

import React, {Component} from 'react';
import {Image, StyleSheet, View, TouchableOpacity, Alert} from 'react-native';
import MasonryList from 'react-native-masonry-list';
import {books} from '../assets';

class Books extends Component {
  constructor(props){
      super(props);
      this.state={
         imageArray: [],
         }
  }
  componentDidMount(){
      var imageArray = [];
       books.map(book =>{
        imageArray.push({uri: book.volumeInfo.imageLinks.thumbnail})
      });
    this.setState({imageArray});
       }
  render() {
    const {imageArray} = this.state;
    return (
      <View style={styles.container}>
         <MasonryList source={imageArray} />
     </View>
   );
  }
 }