如何在 React Native 的 MasonryList 中循环？

Question

I want to use MasonryList component in my react native project.

So i created a component like this below:

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>
    );
  }
}

so, "uri" prop expects a link for a single image, if you want to use multiple images you should have a structure like this.

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

and so on...

I have imported the books, so my question is how can i loop in the components itself, to reach each element's "thumbnail" to get the url on the structure below?

my books.js file structure is like:

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

Simply i could do mapping in the render function and create MasonryList component but that would create the component as much as the loop counts. I want only 1 component and multiple uri links in it.

Answer 1

You can use a state array in "source" prop and in componentDidMount or at any relevant location, set this state using map function.

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>
   );
  }
 }