Rendering di due elementi (immagini) affiancati in una visualizzazione elenco in risposta nativa

Question

Sto provando a progettare qualcosa di simile allo screenshot sottostante in modo che reagisca nativo. Si prega di notare che ogni riquadro è un elemento prodotto recuperato dal back-end.

Ma io sono in grado di farlo utilizzando un ListView e il suo metodo renderRow che sta negando me di utilizzare qualsiasi tipo di InfiniteScroll componenti.

Attualmente sto eseguendo un ciclo con 2 elementi alla volta e il rendering di 2 elementi all'interno di una vista di scorrimento. Di seguito è riportato il mio codice per spiegare meglio.

render() { 
    var elem = []; 
    for(var i = 0; i < this.state.products.length; i+=2) { 
     var prod = this.state.products[i]; 
     var prod2 = this.state.products[i + 1]; 
     elem.push(
     <View style={styles.view} key={i} > 
      <ProductTile onPressAction={this._pdpPage} prod={prod} index={i} /> 
      <ProductTile onPressAction={this._pdpPage} prod={prod2} index={i + 1} /> 
     </View> 
    ); 
    } 
    return (
     <ScrollView> 
      {elem} 
     </ScrollView> 
    ) 
} 

E quindi basato sul puntello indice sto allineando gli elementi a sinistra oa destra. My View stile si presenta come di seguito:

view: { 
    flex: 1, 
    flexDirection: 'row', 
}, 

Si prega di suggerire un modo migliore per fare questo.

Grazie in anticipo.

Answer 1

Un buon modo in cui abbiamo fatto questo in produzione, e ha funzionato bene, è quello di ottenere la larghezza del contenitore e impostare la larghezza delle carte al 50% della larghezza, quindi si può solo spingere tutti i singoli elementi in listview. Inoltre, assicurarsi di impostare uno flexWrap di wrap.

Funzionerà su tutte le dimensioni del dispositivo e non richiede moduli o librerie aggiuntivi.

Partenza il codice di esempio e l'esempio here:

https://rnplay.org/apps/t_6-Ag

/* Get width of window */ 
const width = Dimensions.get('window').width 

/* ListView */ 
<ListView 
    contentContainerStyle={styles.listView} 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow.bind(this)} 
/> 

/* Row */ 
renderRow() { 
    return <View style={styles.card}> 
      <Text>{rowData.name} {rowData.price}</Text> 
     </View> 

/* Styles */ 
listView: { 
    flexDirection: 'row', 
    flexWrap: 'wrap' 
}, 
card: { 
    backgroundColor: 'red', 
    width: (width/2) - 15, 
    height: 300, 
    marginLeft: 10, 
    marginTop: 10 
} 

Answer 2

Reagire nativo ha un buon esempio di questo nella loro CameraRollView.js esempio. Utilizzano una libreria chiamata groupByEveryN per consentire all'utente di impostare il numero di elementi da rendere per riga.

notare il cambiamento al modo in cui si avvia la ListView.DataSource ...

var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); 
    this.state.dataSource = ds.cloneWithRows(
    groupByEveryN(this.state.assets, this.props.imagesPerRow) 
); 

La funzione renderRow ha solo bisogno di aspettarsi una matrice di elementi ...

// rowData is an array of images 
_renderRow: function(rowData: Array<Image>, sectionID: string, rowID: string) { 
    var images = rowData.map((image) => { 
    if (image === null) { 
     return null; 
    } 
    return this.props.renderImage(image); 
    }); 

    return (
    <View style={styles.row}> 
     {images} 
    </View> 
); 
} 

file di esempio completo qui: https://github.com/facebook/react-native/blob/a564af853f108e071e941ac08be4cde864f5bfae/Examples/UIExplorer/js/CameraRollView.js .