Element in Reactive Native ListView einfügen

Question

Ich habe Schwierigkeiten, eine View in ListView Komponente in React Native dynamisch einfügen. Schließlich möchte ich hier etwas wie Google Bilder bekommen:

Ich habe Liste der Boxen, die mit ListView und folgende Arten

renderListStyle: { 
     justifyContent: 'center', 
     flexDirection: 'row', 
     flexWrap: 'wrap' 
    } 

So sind die Boxen korrekt angezeigt werden aufgeführt sind, aber jetzt brauche ich dynamisch Fügen Sie eine Ansicht zwischen den Zeilen ein. Wenn ich zum Beispiel auf die Nummer vier klicke, erscheint die Ansichtskomponente unter der ersten Reihe. Wenn der Benutzer auf 8 klickt, erscheint die Komponente nach der zweiten Zeile usw.

Irgendwelche Ideen, wie man das erreicht? Ich habe die renderSeparator Prop der ListView überprüft aber kann nicht ganz bekommen, was ich brauche. Vielleicht hatte jemand schon mal so ein Problem?

schätze jede Hilfe!

Answer 1

Ist Ihr Listenansicht Rendern jedes einzelne Feld als Zeile? Was ist, wenn Sie alle drei Felder als eine Reihe mit der Ansicht, die Sie einfügen möchten, haben und wenn eines dieser drei Felder angeklickt wird, wird die Ansicht angezeigt. Hier ist eine grobe Skizze von etwas, wie es aussehen könnte:

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData) => (
    <View> 
     <Box onPress={this.showView} /> //the 3 boxes will prob be wrapped in 
     <Box onPress={this.showView} /> //another view to set those to 'row' flexDirection 
     <Box onPress={this.showView} /> 
     <YourView show={this.state.show} /> 
    </View> 
)} 
/>