React Native - So erstellen Sie ein Bildraster wie FaceBook

Question

Ich bin auf der Suche nach einer App mit React Native erstellen und benötigen eine Liste von Bildern angeordnet und angezeigt werden, genau wie Facebook-Aktivitäten Fotos.

Kurz gesagt, ich möchte die reagieren-native Version von https://taras-d.github.io/images-grid/

erstellen

jemand eine RN-Komponente Kennt die etwas ähnliches anbietet?

Answer 1

Sie können das Bildraster selbst erstellen, indem Sie die Breite für jedes Bild festlegen und es in einer Reihe rendern.

Zum Beispiel möchten Sie 3 Bilder für 1 Zeile. Sie können Maße verwenden, um Fensterbreite zu erhalten und für 3 zu teilen.

const windowWidth = Dimensions.get('window').width; 
var IMAGES_PER_ROW = 3; 

calculatedSize(){ 
    var size = windowWidth/IMAGES_PER_ROW 
    return {width: size, height: size} 
} 

Danach werden wir Bilder hintereinander rendern.

renderRow(images) { 
    return images.map((uri,i) =>{ 
     return(
     <Image key={i} style={[styles.item, this.calculatedSize()]} source={{uri: uri}} /> 
    ); 
    }) 
    } 
    renderImagesInGroupsOf(count) { 
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow,i) => { 
     return (
     <View style={styles.row} key={i}> 
      {this.renderRow(imagesForRow)} 
     </View> 
    ) 
    }) 
    } 

Sie können Bildgitterrand einstellen, wie Sie in styles.item wie margin: 1 wollen.

Volles Beispiel here