7

Ich habe einen Abschnitt Ereignisse, die Abschnittsüberschriften enthält, die das Datum enthalten. Ich muss in der Lage sein, zu bestimmten Daten zu springen, sowie die anfängliche Scroll-Position auf das erste Datum in der Zukunft eingestellt zu haben.ReactNative ListView Einstellung der ersten Bildlaufposition nach dem Laden von Daten

Um zu bestimmten Daten zu springen, habe ich versucht, ihre y-Positionen im Zustand zu speichern.

renderSectionHeader= (sectionData, sectionID) => (
     <View 
     onLayout={(event) => { 
      const { y } = event.nativeEvent.layout; 
      const sectionPosition = { [sectionID]: y }; 
      const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition); 
      this.setState({ sectionPositions }); 
     }} 
     ... 

Ich lief in Probleme mit diesem Ansatz jedoch als renderSectionHeader nicht auf Elemente genannt, die weiter unten in der Liste enthalten sind (aufgrund des faulen Rendering).

Ich habe dann versucht, die Position mathematisch zu berechnen, aber dies verursacht dann das Rendern jedes Abschnitts auf dem Bildschirm angezeigt wird, während es sich näher an das angegebene Datum bewegt.

Gibt es eine Möglichkeit zu erreichen, was ich brauche?

RELATED

React Native ListView: How to scroll to a particular row

https://github.com/facebook/react-native/issues/499

UPDATE

In meiner app ich weiß, alle Zeilen genau die gleiche Höhe aufweisen.

Die Verwendung von contentOffset={{ y: offsetY }} anstelle von setScroll funktioniert nicht, da es immer noch alle Elemente rendern muss, bis das angegebene Element funktioniert.

Die Verwendung von initialListSize={99999999} funktioniert, aber macht die Seite sehr langsam, und ich wurde vor der Verwendung gewarnt.

UPDATE 2

Ist es möglich, meinen anfänglichen Inhalt Datenquelle zur Verfügung zu stellen und dann die Daten zu aktualisieren, um zusätzliche Elemente hinzuzufügen in vor und nach den Elementen zur Zeit auf dem Bildschirm?

Oder gibt es eine Bibliothek, die ich nicht gefunden habe, die tut, was ich brauche?

+0

Wenn u speichert die y-Positionen, bevor die Daten geladen werden, so dass sie mehr r irrelevant, nicht wahr? – gran33

+0

Die y-Positionen gespeichert sind in Ordnung, und ich kann zu diesen scrollen, das Problem ist, nur einige der Abschnitt-Header sind wegen Lazy Rendering gerendert, so kann ich nicht zu Elementen weiter unten in der Liste scrollen – Tom

+0

"'Sie können nicht Ihren Kuchen haben und iss es "", Wenn du lazy loading willst, so ist das die Bedeutung davon, du bist faul beim Laden des ganzen 'listView'. Ich gehe davon aus, dass selbst auf nativem (iOS) dieses Problem auftreten wird. – gran33

Antwort

2

Es sieht so aus, als ob dies bald von FlatList gelöst werden könnte, das sich derzeit im experimentellen Ordner im React-Native Repo befindet.

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

Bessere Listview - FlatList Zusammenfassung: Wir brauchen wirklich eine bessere Listenansicht - so ist es hier!

Wichtigste Änderungen von bestehenden ListView:

  • Artikel sind „virtualisierten“ Speicher zu begrenzen - das heißt, Elemente außerhalb des Fensters machen sind abgemeldet und ihr Gedächtnis wieder zugänglich gemacht wird. Diese bedeutet, dass Instanzstatus nicht beibehalten wird, wenn Elemente aus dem Renderfenster scrollen.
  • Nein DataSource - nur eine einfache data Stütze von Form Array<any>.Standardmäßig wird erwartet, dass sie die Form {key: string} haben, aber eine benutzerdefinierte rowExtractor Funktion kann für verschiedene Formen bereitgestellt werden, z. B. . graphql Daten, wo Sie id zu key zuordnen möchten. Beachten Sie die zugrundeliegende VirtualizedList ist viel flexibler.
  • Fancy scrollTo Funktionalität: scrollToEnd, scrollToIndex und scrollToItem zusätzlich zu den normalen scrollToOffset.
  • Built-in Pull um die Unterstützung zu aktualisieren - setzen Sie die onRefresh und refreshing Requisiten.
  • Das Rendern zusätzlicher Zeilen erfolgt normalerweise mit niedriger Priorität, nachdem alle Interaktionen/Animationen abgeschlossen wurden, es sei denn, wir haben gerade keine gerenderten Inhalte mehr. Dies sollte Apps helfen, schneller zu reagieren.
  • Komponentenrequisiten ersetzen Renderfunktionen, z. ItemComponent: ReactClass<{item: Item, index: number}> ersetzt renderRow: (...) => React.Element<*>
  • Unterstützt dynamische Elemente automatisch durch onLayout, oder getItemLayout kann für einen perf Auftrieb und glattes scrollToIndex und Scroll-Leiste Verhalten zur Verfügung gestellt werden.
  • Sichtbarkeit Rückruf mit leistungsfähigere Sichtbarkeit Rückruf und funktioniert im vertikalen und horizontalen Modus auf mindestens Android und iOS, aber wahrscheinlich auch andere Plattformen. Extra Power kommt von der viewablePercentThreshold, die der Client entscheiden kann, wenn ein Artikel als sichtbar betrachtet werden soll.

Demo:

enter image description here