Native Flexbox reaktivieren - wie prozentual || Spalten || reagierend || Gitter usw
Nachdem ich in den letzten Wochen mit nativen iOS-Geräten gearbeitet habe, bin ich auf einige Mängel des Flex-Stylings gestoßen ... Vor allem, wenn es um "reaktionsschnelles" Verhalten geht.
Nehmen wir beispielsweise an, Sie möchten eine Ansicht erstellen, die Karten enthält (die Metadaten für diese Karten stammen aus einer API). Sie möchten, dass die Karten 50% der Ansichtsbreite minus dem Rand & amp; Padding und nach jeweils 2 umbrechen.
Die aktuelle Implementierung, die ich für diese Ansicht habe, teilt das zurückgegebene Array in Zeilen mit zwei Elementen auf. Der Listencontainer hat flex: 1, flexDirection: 'column , die Zeilen flex: 1 und jede Karte flex: 1 . Das Endergebnis ist, dass jede Zeile 2 Spalten hat, die gleichmäßig die Hälfte der Ansichtsbreite einnehmen.
Es scheint, als ob es keine triviale Möglichkeit gibt, dies in nativen React-Stilen zu tun, ohne JavaScript zu verwenden, um eine Art Vorverarbeitung der Daten durchzuführen, damit sie korrekt formatiert wird. Hat jemand irgendwelche Vorschläge?
3 Antworten
Es gibt möglicherweise einen besseren Weg, dies mit flexbox zu erreichen, aber ich definiere normalerweise "prozentual" Helfer vw und vh für die Breite des Darstellungsbereichs und die Höhe des Darstellungsbereichs, benannt nach den Größeneinheiten des CSS-Darstellungsbereichs:
Um Elemente in einem Raster fließen zu lassen, können Sie eine geeignete Größe für Elemente unter Berücksichtigung der Ränder und der Größe des Darstellungsbereichs berechnen:
%Vor% Sie sollten diese Technik nur verwenden, wenn Sie eine bekannte und begrenzte Anzahl von Elementen haben - für eine beliebige Anzahl von Karten sollten Sie ListView aus Leistungsgründen verwenden und Ihren Datensatz manuell in Zeilen aufteilen.
Tags und Links javascript css react-native reactjs flexbox