Stack
Abstand über gap, nicht über Margins am Kind
Warum
Ein Abstand beschreibt die Beziehung zwischen zwei Elementen. Er gehört zu keinem der beiden allein. Trägt das Kind den Abstand, bringt es ihn überall mit hin, auch dorthin, wo er nicht passt. Das letzte Kind hat dann einen ungewollten Abstand nach unten, den jemand mit last:mb-0 wieder entfernt. Damit steht die Regel an zwei Stellen.
gap löst das an einer Stelle: der Container sagt, wie weit seine Kinder auseinanderstehen. Das letzte Kind braucht keine Sonderbehandlung, nichts wird zurückgesetzt, und keine Margins fallen zusammen.
Die Hilfsklasse space-y löst dasselbe Problem, aber über Margins an allen Kindern außer dem ersten. Sie bricht, sobald ein Kind bedingt gerendert wird oder ein Fragment dazwischenliegt, und sie funktioniert in React Native nicht. NativeWind 4 erzeugt für space-x-* und space-y-* auf iOS und Android keine Regel. Die Kinder stehen dann ohne Abstand aneinander. Im Web von Expo stimmt der Abstand, deshalb fällt der Fehler im Browser nicht auf.
Woran Du den Verstoß erkennst
mb-*odermt-*an Kindern einer Liste.last:mb-0,first:mt-0oder:not(:last-child)als Korrektur.space-y-*an einem Container.- Ein Abstand ist doppelt so groß wie gewollt, weil zwei Margins aufeinandertreffen.
Richtig / falsch
// richtig
<View className="flex flex-col gap-3">
<Row />
<Row />
</View>
// falsch
<View className="space-y-3">
<Row className="mb-3" />
<Row className="mb-3 last:mb-0" />
</View>
Grenzen
Der Abstand einer Gruppe zu ihrem Umfeld ist kein Abstand zwischen Geschwistern. Er gehört als Padding in den Abschnitt, siehe Die Karte hat kein Padding.