wake-up-neo.com

Reagiere nativ - Paginierung von ListViews in ScrollView?

Ich habe 3 ListView Komponenten in einer einzelnen ScrollView Komponente wie folgt:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

Die Komponente Header hat einige gemeinsame Inhalte und 3 Registerkarten, auf denen die jeweilige ListView angezeigt wird.

Das Problem ist, dass ListView mit onEndReached={() => alert('load more 1')} niemals die Warnung ausführt, sodass ich nie mehr laden kann, wenn ich nach unten scrolle und das Ende der Listenansicht erreiche. Entfernen Sie die umhüllende ScrollView, und die Warnung wird ausgeführt, aber die allgemeine Header wird nicht verschoben, da wir gerade die umhüllende ScrollView entfernt haben. Die Kopfzeile muss mit der Listenansicht scrollen, weshalb ich alles, was zum Scrollen benötigt wird, in die ScrollView eingebunden habe.

WICHTIGER HINWEIS: Ich kann für dieses Szenario ListView mit renderHeader={this.header} nicht wirklich verwenden. Denn obwohl die Header gescrollt wird, werden die gemeinsame Header und die 3 Registerkarten für jede ListView jedes Mal neu gerendert, wenn eine ListView statt einmal gerendert wird. Eine neue Header render jedes Mal für jede ListView wird es für die App nicht schneiden.

Auf der Suche nach einer Lösung für dieses Problem, bei der die Header mit den Listenansichten scrollt und die onEndReached für die sichtbare ListView ausgelöst wird.

15
Wonka

Ich denke, Sie müssen dieses Problem lösen, indem Sie die dataSource in jeder listView ändern, um zu reagieren, welches Header-Element ausgewählt ist, anstatt drei verschiedene ListViews zu laden. 

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

Der einzige Grund, aus dem Sie dies nicht tun möchten, ist, wenn Sie die Bildlaufposition in den drei untergeordneten ListViews beibehalten möchten. Dies ist jedoch nicht nützlich, da Sie immer nach oben scrollen müssen, um die gewünschte ListView-Ansicht zu ändern um sowieso.

In Ihrer _renderHeader-Funktion würden Sie dann einen Selektor rendern, der currentList mit unterschiedlichen Daten abhängig vom ausgewählten Header auffüllt.

2
frank

Im Styling können Sie seine Position relativ mit top: 0 und left: 0 festlegen. Auf diese Weise bleibt es oben statisch. 

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

Die zweite Option, die in scrollView funktionieren kann, ist die Angabe der Höhe für alle drei ListView.

0
while1

Sie können vielleicht ScrollView::onScroll verwenden, aber es wird ein bisschen hackig. Sie müssen die Größe Ihrer Listenansichten kennen.

Nur mit ListView arbeiten

Vielleicht ist die beste Lösung das Spiel mit der Datenquelle ListView und der Funktion onEndReached.

Wenn Sie Ihr Dataset aktualisieren, wenn ListView::onEndReached ausgelöst wird, können Sie Ihrer ListView meiner Meinung nach weitere Elemente hinzufügen. Auf diese Weise müssen Sie mit ListViews in ScrollViews keine Hacking-Aktionen ausführen.

0
Julien Deniau