Reactive Native Listview mit verschiedenen Arten von Komponenten

Question

Ich entwickle eine reaktive native Anwendung. Auf seiner Homepage muss ich einige Beiträge wie Video, Audio, Bilder, Blogs, Artikel usw. zeigen. Ich bin verwirrt, wie das zu erreichen ist. Wie kann ich eine Liste oder Rasteransicht mit verschiedenen Arten von Komponenten erstellen, Mischung aus Audio, Video, Bildern. Von Backend werden wir ein Bild oder Video oder Audio oder ein Blog hinzufügen und ein neuer Beitrag wird in der Liste erstellt. Auch möchte ich diesen neuen Beitrag am Anfang und nicht am Ende hinzufügen. Jede Hilfe wäre willkommen.

Answer 1

Sie können dazu die FlatList verwenden. Es ist so einfach zu bedienen und seine Leistung ist gut und es wird von React-Native empfohlen (siehe this). Dies ist ein einfaches Beispiel für die Verwendung von FlatList Sie können Ihre Listenelemente in einer separaten Komponente oder Funktion und übergeben Sie es in der renderItem Prop von FlatList. Sie können das vollständige Dokument von FlatList in here sehen:

_keyExtractor = (item, index) => item.id; 

    _renderItem = ({item}) => (
    if (item.type === 'video') { 
     <MyVideo item={item}/> 
    } else if (item.type === 'image') { 
     <MyImage item={item}/> 
    } else if ... 
     ... 
); 

    render() { 
    return (
     <FlatList 
     data={dataList} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
     /> 
    ); 
    }