2017-05-29 3 views
0

In meiner app erstellen Ich brauche ein Gitter wie auf dem Screenshot zu erstellen:React-native einem performantes Gitter

Grid that i want

Zellen Breite und Zahl ist abhängig von oben gewähltem Datum. Jede Zelle sollte Berührungen behandeln (Zeitstempel und Zahlen auf der linken Seite passieren).

Momentan verwende ich die einfache "View" -Komponente von reaktiv-nativ mit Rändern links und oben. Wenn ich oben auf das Datum tippe, dauert es etwa 0,5 - 1 Sekunden (hängt von der Anzahl der Zellen ab), um es neu zu rendern. Gibt es eine performantere Möglichkeit, ein solches Raster zu erstellen?

Danke!

Antwort

0

Die empfohlene Methode zum Erstellen performanter Raster und wiederholter Datenblöcke sind die ListView- oder FlatList-Komponenten. Ich habe keine Erfahrung mit der FlatList, da es ziemlich neu ist, aber ListView hat Optimierungen, die es beim Rendern unterstützen, indem nur die Elemente gerendert werden, die sich gerade auf dem Bildschirm befinden.

Ich glaube, dass beide Elemente vertikal oder horizontal scrollen können, aber ich glaube nicht, dass sie beides können. Nicht positiv.

Wenn Sie sowohl horizontal als auch vertikal scrollen müssen, müssen Sie möglicherweise die Listenkomponente in eine Bildlaufansicht umbrechen. Im Grunde würden Sie die Liste so breit wie nötig machen, auch wenn sie größer als der Bildschirm ist. Die Liste selbst behandelt das vertikale Scrollen und die Scroll-Ansicht behandelt das horizontale Scrollen (oder umgekehrt, wenn es breiter als hoch ist).

Darüber hinaus gibt es eine Vielzahl von Leistungsverbesserungen, die Sie in aussehen können Reagieren:

  • 16 Reagieren Sie schneller als es einen neuen diffing Motor hat und ermöglicht eine Priorisierung in dem Rendering-Engine. Sie können versuchen, eine benutzerdefinierte -Funktion zu erstellen.
  • Ich habe auch gesehen, dass Leute Leistungsverbesserungen beanspruchen, indem sie ihre sich wiederholenden Komponenten (die Zellen im Grid) nicht in Klassen einfügen, sondern stattdessen reine Funktionen verwenden. Leider kann ich nicht den Blog-Eintrag wieder auftauchen jetzt
  • usw.
0

Der beste Weg, Raster zu implementieren verwendet FlatList Komponente und es ist für diese (siehe here) empfohlen. Sie können die Eigenschaften numColumns und columnWrapperStyle verwenden und eine Variable anwenden, um Ihr Grid dynamisch zu formatieren. FlatList ist einfach zu bedienen und Sie können ein großes Dokument und nützliche Beispiele here sehen.