Mit einem Reagieren Nativen FlatList mit zwei völlig verschiedenen Daten-arrays

Ich habe zwei arrays, eine für Produkte und eine für die Aufsichtsbehörden. Offensichtlich haben beide sehr unterschiedliche Arten von Daten. Ich will erstellen Sie eine scrollbare Liste, die alle Produkte anzuzeigen, gefolgt von allen Vorgesetzten mit einer einzigen Liste aus. Ist das möglich mit React Native FlatList? Wenn ja, oder wenn nicht, wie kann ich gehen über das tun dies?

Kann ich aktuell Rendern Sie ein einzelnes Daten-array wie folgt:

<FlatList
    data={this.state.products}
    renderItem={this.renderItem}
/>

Aber, wie kann ich hängen Sie den Aufsichtsbehörden die Daten am Ende dieser Liste? Offensichtlich, weil die Daten ganz anders zwischen den beiden arrays kann ich nicht einfach Zusammenführen der arrays und /oder der gleichen renderItem Funktion.

Wie kann ich zwei völlig verschiedene Arten von Daten, die einer nach dem anderen in der gleichen Liste?

InformationsquelleAutor kojow7 | 2018-04-29



One Reply
  1. 4

    Können Sie die Zusammenführung der Daten zusammen, und verwenden Sie single-FlatList mit einem einzigen renderItem prop. Ohne eine Probe der Daten sein ein kleines Ratespiel, aber unten ist ein Beispiel, wie Sie tun können.

    Beispiel

    Angenommen, Sie haben Daten-Struktur wie folgt Aussehen.

    const Products = [
      {
        id: 1,
        name: 'Product 1'
      },
      {
        id: 2,
        name: 'Product 2'
      },
      {
        id: 3,
        name: 'Product 3'
      },
      {
        id: 4,
        name: 'Product 4'
      },
    ];
    
    const Supervisors = [
      {
        belongsToPruduct: 1,
        name: 'SuperVisor 1' 
      },
      {
        belongsToPruduct: 3,
        name: 'SuperVisor 2' 
      },
      {
        belongsToPruduct: 2,
        name: 'SuperVisor 3' 
      },
      {
        belongsToPruduct: 4,
        name: 'SuperVisor 4' 
      }
    ];
    

    Und nehmen wir an, Sie Rendern Products im FlatList. Sie können etwas tun, wie unten in Ihre renderItem Funktion

    renderItem = ({ item }) => {
      const superviors = Supervisors.filter((supervisor) => supervisor.belongsToPruduct === item.id)
      return (
        <View style={styles.productContainer}>
          <Text style={styles.productName}>{item.name}</Text>
            <View style={styles.supervisorsContainer}>
              {
                superviors.map((supervisor) => <Text style={styles.supervisorName}>{supervisor.name}</Text>)
              }
            </View>
        </View>
      )
    }
    

    UPDATE

    Bezugnehmend auf Ihren Kommentar, den ich denke, dann kann man die Verwendung von SectionList eher als FlatList

    <SectionList 
       renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
       sections={[ 
         { title: 'Products', data: Products, renderItem: ({ item, index, section: { title, data } }) => <Text>{item.name}</Text> }, 
         { title: 'Supervisors', data: Supervisors, renderItem: ({ item, index, section: { title, data } }) => <Text>{item.name}</Text>}, 
        ]} 
       keyExtractor={(item, index) => item.name + index} 
     />
    
    • Die Aufsichtsbehörden gehören nicht auf bestimmte Produkte. In einer Art und Weise, Sie sind völlig getrennte Einheiten. Also im Grunde möchte ich einen einzigen scrollbaren Liste. Der Obere Teil der Liste enthält Produkte, und der untere Teil der Liste enthält die Aufsichtsbehörden. Also, wenn Sie einen Bildlauf an das Ende der Produkte, die es wird Ihnen zeigen, die die Aufseher in der gleichen scroll-Bewegung. Ich will es zu sein, eine Rubrik „Produkte“ und „Supervisors“ an der Spitze jeden Abschnitt.
    • Hinzugefügt ein update in Zusammenhang mit Ihrem Kommentar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.