Rasteransicht auf React Native Android

Question

Ich versuche, eine scrollbare, gitterartige ListView auf React Native Android zu erstellen.

Ich fand diese, und es sieht genauso aus wie das, was ich tun mag: https://github.com/yelled3/react-native-grid-example

jedoch der Stil auf Android verkorkst ist, wird der Wickel nicht zur Arbeit erscheinen. Ich habe 2 Zeilen, kann ich nicht alle meine Elemente sehen ...

Soll es auf Android unterstützt werden? Oder muss ich einen ganz anderen Ansatz wählen? (D haben eine Komponente pro Zeile und manuell meine Datenquelle brechen)

Answer 1

Sie dieses Beispiel versuchen, aus react-native Repo https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js

gut auf beiden platforfms für mich gearbeitet.

Es ist besser, hier Ihren Code zu teilen, wenn Sie eine detailliertere Antwort wünschen.

Answer 2

Das Problem, dass Sie nicht alle Zeilen sehen können, liegt wahrscheinlich an der Navigationsleiste. Angenommen, Sie haben eine flex: 1 in der Ansicht, die Zeilenelemente erscheinen hinter der Navigationsleiste.

Eine mögliche Lösung ist es, die Größe der Navbar zu bestimmen und diese dann zu verwenden, um die Größe der Ansicht unter der Navbar herauszufinden. Sie können Ihr Raster dann innerhalb der berechneten Ansicht rendern.

Etwas in diese Richtung:

const NavHeightPadding = Platform.OS === 'ios' ? 64 : 54 
const { width, height } = Dimensions.get('window'); 
const ViewHeight = { height: height - NavHeightPadding } 

<View style={[{ marginTop: NavHeightPadding }, ViewHeight]}> 
    ...some grid component 
</View> 

Was, wie das Raster zu erstellen, können Sie einen Blick auf @ Tschuktschen Antwort, wo er von Facebook-Beispielen eine sehr gute Ressource zur Verfügung stellt.

Ein paar andere Gitter Alternativen sind:

• https://github.com/jskuby/react-native-gridview
• https://github.com/lucholaf/react-native-grid-view