Zeichnen Sie eine Ansicht mit Bildmuster

Question

Ich möchte die Ansicht mit Bildern Muster wie ein Bild unten rendern. Zuerst schiebe ich eine benötigte Anzahl von Elementen in ein Array und dann habe ich die Methode aufgerufen, die mir eine Ansicht (Zeile) zurückgegeben hat.

getRow =() => { 
     return(
      <View style={{flex:1,flexDirection:'row', justifyContent: "space-between"}}> 
       { this.images.map(function(img,i) { return img; }) } 
      </View> 
     ) 
    } 

Wie ich mir vorstellen kann, brauche ich ein zweidimensionales Array. Ich weiß, wie viele Zeilen ich brauche.

prepareTable =() => { 
    let arr = [] 
    for (let i = 0; i < pattern.height.count; ++i) { 
     arr.push((this.drawRow())) 
    } 
    return arr 
} 

Und wenn ich sie machen wollen:: Also, ich habe diese gemacht

render() { 

    let arr = prepareTable() 
    return(
    <View style={{flex:1,flexDirection:'column', justifyContent: "space-between"}}> 
     {arr.map((row,i)=>{return row})} 
    </View> 
    ) 
} 

Aber es funktioniert nicht. Wo ist mein Fehler ist

Answer 1

Ich denke, die einfache und beste Weg, nur eine einzige Ansicht mit flexWrap verwenden wird, speichern Sie Ihre alle Bilder in einem Array in Ihrer Ansicht mit flexWrap die Karte Funktion aufrufen.

render(){ 
    return(
      <View style={styles.gridView}> 
        {imagesArray.map((image, index) => this.renderImage(image, index))} 
      </View>); 
} 
renderImage=(image, index)=>{ 
    return (
      <Image .../>[![Hope it will help , you can show your images like this way.][1]][1] 
     ); 
} 

const styles = { 
    gridView: { 
     paddingVertical: 10, 
     marginHorizontal: 20, 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
} 

Answer 2

Es gibt ein paar Unbekannten jetzt:

• was in this.images ist?
• was macht this.drawRow?

So in dieser Antwort, es gibt ein paar Annahmen:

• this.images ist ein Array von Bildkomponenten mit N Elementen wie:

  [ 
  (<Image 
      style={styles.image} 
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
  />), 
  (...) 
  ] 
  

---

Wenn Wir abstrahieren die Logik ein bisschen, wir hätten etwas wie das Folgende:

// `this.images` seems to be a little sturdy for now so instead we will 
    // have an `imagesPerRow` method that takes in the number of 
    // images that we want on each `row` 
    imagesPerRow(number) { 
     const img = []; 
     for(let i = 0; i < number; i++) { 
     img.push(
      <Image 
      style={styles.image} 
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
      /> 
     ); 
     } 
     return img; 
    } 
    // the `getRow` method wrap the array of images inside a `View` element 
    // Here number will be the number of images inside it 
    getRow = (number) => { 
     return (
     <View style={styles.row}> 
     { this.imagesPerRow(number) } 
     </View> 
    ); 
    } 

    // drawTable takes two parameters rowNum (amount of rows)and 
    // columnNum (amount of columns), these will render the actual table 
    drawTable(rowNum, columnNum) { 
     const rows = [] 
     for(let i = 0; i < rowNum; i++) { 
     rows.push(this.getRow(columnNum)); 
     } 
     return rows; 
    } 

    // In the render method we just call the `drawTable` with the desired params 
    render() { 
     return (
     <View style={styles.container}> 
      { this.drawTable(10, 4) } 
     </View> 
    ); 
    } 

Es ist wichtig, Styling im Auge zu behalten, sonst wird es eng aussehen

const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     alignItems: 'stretch', 
     justifyContent: 'center', 
     paddingTop: Constants.statusBarHeight, 
     backgroundColor: '#222222', 
     }, 
     image: { 
     width: 50, 
     height: 50 

     }, 
     row: { 
     flex:1, 
     flexDirection:'row', 
     justifyContent: 'space-around', 
     alignItems: 'center' 
     } 
    }); 

hier finden Sie working example finden können, die ich erstellt.

Hoffe, das hilft.