Frage Natives Stylesheet reagieren: Was macht {flex: 1}?


React Native verwendet flexbox für das Layout. In allen Beispielen, die ich gesehen habe, machen sie so etwas:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

Ich bin neugierig auf die flex: 1 Teil. Basierend auf Chris Coyiers Definition hier https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 sollte gleich sein wie flex-grow: 1aber für mich sieht es so aus flex: 1 in React Native entspricht display: flex in CSS.

Hier ist ein CodePen, der das demonstriert flex: 1 Die Art und Weise, wie Reaction Native Beispiele es verwenden, macht nichts in CSS:

http://codepen.io/johnnyo/pen/BoKbpb

Es ist nicht, bis wir verwenden display: flex in CSS, bis flexbox zu arbeiten beginnt:

http://codepen.io/johnnyo/pen/epZXgz

Also heißt das flex: 1 in React Native entspricht display: flex in CSS?


34
2017-09-18 20:42


Ursprung


Antworten:


Es gibt einen großen Unterschied zwischen der css flexbox und der von Facebook implementierten. Viele Dinge sind gemeinsam, aber die Standardwerte sind sehr unterschiedlich. Speziell:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: Attribut wird nur verwendet, wenn es auf der gleichen Ebene wenige Komponenten mit unterschiedlichen Flex-Werten gibt (flex: 1, flex: 3) bedeutet, dass das zweite Element 3 mal größer sein sollte als das erste. Das Flex-Attribut wird als einziges unterstützt (keine Unterstützung für Wachstum und Verkleinerung).

Mehr Info: https://github.com/facebook/css-layout


25
2017-09-18 21:24



Eine Bemerkung zu Jarek Potiuks Antwort: "flex: 1" tut etwas in reaktionsähnlichem Verhalten wie Flex-Grow. Auch wenn es der einzige mit flex ist: definiert.

Stile wie flexDirection, alignItems, justifyContent definieren alle Stile von untergeordneten Elementen des Elements. Ähnlich wie CSS Display: flex, das auch Kinder definiert.

Im Gegensatz dazu definiert flex: x das Element selbst.

Z.B. Wenn eine Container-Komponente flexDirection hat: 'row', alignItems: 'center'
Und es gibt 3 Kinder:

Kind 1 hat eine Breite von 50

Kind 2 hat Flex 1 (oder eine andere Zahl, aber 1 ist üblich)

Kind 3 hat eine Breite von 50

Dann wird die mittlere Komponente "gedehnt", so dass die 3 Kinder zusammen die gesamte Breite der Elternkomponente ausfüllen.


22
2017-09-21 10:27



Viele Tutorials verwenden flex: 1ähnlich wie in deinem Beispiel. Der Hauptgrund ist, dass manchmal (abhängig von dem Element, wie z Listenstil Wenn mein Speicher standardmäßig verwendet wird, nimmt die Komponente nicht den gesamten Bildschirm / Bereich ein, wenn Sie die Abmessungen nicht definieren, z. B. die Höhe (z. height: '400px'). Biegen: ist genial, weil es die Dinge für verschiedene Größen hält.

Aber ich sollte das für jede Komponente mit beachten keine GeschwisterDer Wert für flex ist völlig willkürlich. Ex. für Ihre Top-Level-Komponente könnte man sagen flex: 43254315 und es macht das Gleiche wie flex: 1. Es bedeutet nur "nimm den ganzen Raum ein" (was auch immer "ganz" sein mag).

Auf der anderen Seite, wenn Sie welche haben Geschwisterkomponenten, dann ist der Flex-Wert sehr wichtig. Zum Beispiel, wenn eine Komponente ist flex: 2 und ein anderes ist flex: 3, dann nimmt der erste 2/5 des Bildschirms und der zweite 3/5 des Bildschirms ein.

Kurz gesagt: Abhängig von deinen Stilen, könnte es sein aussehen mögen flex: 1 ist das gleiche wie display: flex, aber das liegt nur daran, wie Sie es in Ihrem Beispiel verwenden. Sie werden sehen, dass es sich sehr anders verhält, wenn Sie ihm nur ein paar Geschwister geben.


7
2017-07-14 06:01



Wie du habe ich mich bemüht, diesen Tag zu verstehen, der nicht korrekt auf Facebook Code dokumentiert ist, aber ich habe schließlich entdeckt, dass es zwei Dinge tut:

  1. Container betrachten alle Kinder mit einem flex Attribut, um eine Höhe von 0 zu haben, um zu bestimmen, wie viel Platz sie einnehmen.
  2. Komponenten mit flex: X Erweitern, um nach dem Auslegen anderer Komponenten den verbleibenden Raum in ihrem Behälter zu belegen. Sie teilen diesen zusätzlichen Raum proportional zu ihren X-Werten.

Der erste Punkt ist warum flex: 1 kann scheinen, den gleichen Effekt wie zu haben display: flex. Betrachten Sie den folgenden JSX-Code:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

Nur die erste Textkomponente wird gedruckt, weil die zweite Textkomponente eine Höhe von 0 hat. ExampleAppContainer reserviert genug Platz für die erste Textkomponente und es gibt keinen Platz für die zweite Textkomponente.

Betrachten Sie nun diesen Code:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

Schon seit ExampleAppContainer hat flex: 1Es erweitert sich, um so viel Platz wie möglich zu beanspruchen. Wenn Sie davon ausgehen, dass es sich um die Root-Komponente für den React-Teil Ihrer App handelt, handelt es sich normalerweise um den gesamten Bildschirm des Telefons. Als nächstes weist es der ersten Textkomponente genügend Platz zu und erlaubt es der zweiten Textkomponente, sich zu erweitern und den Rest des Bildschirms einzunehmen.

Auf diese Weise müssen Sie sich oft bewerben flex: 1 bis hinunter zur Komponentenhierarchie, um Ihre innersten Komponenten zu ermöglichen flex: N Raum, um richtig zu expandieren.


6
2017-07-05 14:00



das ist sehr einfach nur denken, dass, wenn Sie sagen flex: 1 zu allen Elementen dieses Element erhalten alle Höhe des Elternelements, wenn dieses Element flex haben: 1 und nicht Elternelement bekommen alle Höhe der Bildschirmgröße.

zum Beispiel möchten Sie ein Containerelement haben, das die gesamte Höhe des Bildschirms erhält, und dieses Element hat drei untergeordnete Elemente, von denen jedes Element 1/3 Bildschirmhöhe hat Für dieses Beispiel erhalten Sie einfach das Elternelement flex: 1 und drei Kindelement flex: 1/3 Siehe Code unten

<View style={{flex: 1,backgroundColor: 'red'}}>

        <View style={{flex: 1/3, backgroundColor: 'green'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'yellow'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'pink'}}></View>

      </View>

0
2017-07-18 15:29