flex vs flexGrow vs flexShrink vs flexBasis in React Native?

72

Ich endlich aufgewertet reagieren nativer auf 0,42 , die die Einführung umfasst flexGrow, flexShrinkund flexBasisund die Änderung (oder fix), wieflex gemacht wird.

Ich bekomme immer wieder Fehler wie:

Die Ansicht wurde mit explizit eingestellter Breite / Höhe, jedoch mit einer FlexBasis von 0 gerendert. (Dies kann durch Ändern von flex: in flexGrow behoben werden :) Ansicht:

Kann jemand den Unterschied zwischen flex: 1vs erklären flexGrow: 1. Wenn ich das eine oder andere auf eine Ansicht anwende, scheint es verschiedene Dinge zu tun, aber sollte es nicht dasselbe tun?

react-native flexbox flex-grow Dev01
quelle
Es werden nur CSS-Eigenschaften
angewendet,
1
Vielen Dank. Die Sache ist, es ist nicht dasselbe wie CSS, oder? In CSS Flex: ist nicht nur eine Zahl, bei der es sich um eine native Reaktion handelt. Wissen Sie, was die Ausnahmen sind, wenn Sie die native native Flexbox mit der CSS-Flexbox vergleichen?
Dev01
Nie React Native verwendet, nur React, und es macht im Allgemeinen nichts so Magisches mit dem style-Attribut, es weist lediglich die Eigenschaften als CSS-Eigenschaften zu. Aber ich habe den Code nicht überprüft. Ich denke, eine gute Vergleichsbasis wäre, eine Seite in React Native und eine Seite mit reinem CSS zu erstellen, wobei beide das gleiche Markup generieren und die Ergebnisse vergleichen.
GillesC

Antworten:

193

Hier ist ein Testcode zu beachten:

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>

        <View style={{flex: 0, backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1 (17px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
    </View>;
}

Hier ist ein Screenshot des obigen Codes:

Bildschirmfoto

Hinzugefügt widthund height:

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{flex: 0, backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
        <View style={{flex: 0, width: 700, height: 20, backgroundColor: "yellow"}}><Text>flex: 0, width: 700, height: 20 (20px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
        <View style={{flex: 1, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, width: 700, height: 20, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, width: 700, height: 20, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
    </View>;
}

Hier ist ein Screenshot des obigen Codes:

Screenshot 2

flex: 0 (Standard)

  • flex: 0
    • Element nimmt die Größe des Inhalts an. Laut Dokumentation sollte die Größe nach Einstellungen widthund heightRequisiten bemessen sein, aber es scheint zum Inhalt zu passen, wenn diese nicht festgelegt sind.
  • flex: 0, flexBasis: {{px}}
    • Element nimmt die durch angegebene Größe an flexBasis
  • flex: 0, flexGrow: 1
    • Mit flex: 0und flexGrow: 1; Dies entspricht dem Hinzufügen der Größe des Inhalts (im obigen Beispiel ist es a) zur Größe eines Elements, auf das festgelegt ist flex: 1. Es ist ähnlich, flex: 1, flexBasis: 10außer dass Sie anstelle einer Anzahl von Pixeln die Größe des Inhalts hinzufügen.
  • flex: 0, flexShrink: 1
    • Mit flex: 0und flexShrink: 1scheint das Element die Größe des Inhalts anzunehmen, mit anderen Worten, es ist dasselbe wie nur flex: 0. Ich wette, es gibt Situationen, in denen es größer als der Inhalt wäre, aber das habe ich noch nicht gesehen.
  • flex: 0, flexGrow: 1, flexBasis: {{px}}
    • Dies ist dasselbe, flex: 0, flexGrow: 1außer dass anstelle des Hinzufügens der Inhaltsgröße zu einem flex: 1Element die angegebene Anzahl von Pixeln hinzugefügt wird .
  • flex: 0, flexShrink: 1, flexBasis: {{px}}
    • Dies ist das gleiche wie flex: 0, flexBasis: {{px}}.
  • flex: 0, height: {{px}}
    • Mit flex: 0, heightwird behandelt wie flexBasis. Wenn beide a heightund gesetzt flexBasissind, heightwird ignoriert.

flex: 1

  • flex: 1
  • flex: 1, flexBasis: {{px}}
    • Mit flex: 1und flexBasis: {{px}}; Der Wert von flexBasiswird zur Größe des Elements addiert. Mit anderen Worten, es ist, als würde man ein flex: 1Element nehmen und die Anzahl der durch festgelegten Pixel hinzufügen flexBasis. Wenn also ein flex: 1Element 50 Pixel groß ist und Sie hinzufügen, ist flexBasis: 20das Element jetzt 70 Pixel groß.
  • flex: 1, flexGrow: 1
    • ignoriert
  • flex: 1, flexShrink: 1
    • ignoriert
  • flex: 1, flexGrow: 1, flexBasis: {{px}}
    • Dies ist das gleiche wie flex: 1, flexBasis: {{px}}da flexGrowignoriert wird.
  • flex: 1, flexShrink: 1, flexBasis: {{px}}
    • Dies ist das gleiche wie flex: 1, flexBasis: {{px}}da flexShrinkignoriert wird.
  • flex: 1, height: {{px}}
    • Mit flex: 1, heightwird ignoriert. Verwenden Sie flexBasisstattdessen.

Hier sind meine Beobachtungen:

  • Tipp zur Fehlerbehebung: Stellen Sie sicher, dass die übergeordneten Ansichten den Kindern Raum zum Wachsen / Schrumpfen geben. Beachten Sie, dass flex: 1in der übergeordneten Ansicht nicht alle untergeordneten Elemente angezeigt werden, wie Sie es erwarten würden.
  • Tipp zurHot Reloading Fehlerbehebung : Verwenden Sie diese Option nicht, um diese Werte zu testen. Nach einigen Ladevorgängen können Elemente falsch angezeigt werden. Ich empfehle, + (viel) zu aktivieren Live Reloadoder zu verwenden .commandr
  • Der Standard-Flex-Wert ist flex: 0. Wenn Sie keinen Flex-Style-Wert hinzufügen, wird standardmäßig 0 verwendet.
  • Tipp zur Fehlerbehebung: Fehlerbehebung Wenn Sie versuchen, herauszufinden, warum etwas nicht so angezeigt wird, wie Sie es sich vorstellen, beginnen Sie mit dem (am meisten) übergeordneten Element und stellen Sie sicher, dass es den Kindern genügend Platz bietet, um das zu tun, was sie tun müssen. Mit anderen Worten, stellen Sie es auf flex: 1 ein und prüfen Sie, ob dies hilfreich ist. Gehen Sie dann zum nächsten Kind und wiederholen Sie den Vorgang.
  • Es scheint, als würde widthes immer berücksichtigt, flexDirection: "column"unabhängig von den anderen Flex-Requisiten. Gleiches gilt für heightmit flexDirection: "row".
  • Nach dem Ausführen dieser Test im Allgemeinen würde ich flexBasisüber heightda flexBasisTrümpfe height.
Dev01
quelle
4
Bei dieser Antwort fehlt eindeutig die Dokumentation für die Reaktion auf native Flex. Dankeschön.
Soorena
Du bist mein Retter ...;)
vicke4
Fantastische Erklärung von Flex in React Native. Danke vielmals.
Javeedishaq
Was ist mit flex: -1? Beste Erklärung bisher.
Bernard
Ihr Abschnitt "Beobachtungen" war sehr hilfreich, danke.
oder