So verwenden Sie Flexbox in React Native

Flexbox ist ein CSS-Tool, mit dem Sie flexible eindimensionale Layouts erstellen können. Es ermöglicht Ihnen, die Position von Elementen innerhalb eines Containers zu steuern, sodass Sie mehr Kontrolle über die Präsentation Ihrer Inhalte auf dem Bildschirm haben.

Dieses Tutorial zeigt, wie Sie Flexbox in React Native verwenden, um flexible und reaktionsschnelle Layouts zu erstellen. Sie erfahren, wie Sie untergeordnete Elemente eines Containerelements mithilfe von Flexbox-Eigenschaften positionieren.

Vergleich des Flexbox-Verhaltens in React Native und der Webentwicklung

Wenn Sie den Inhalt des Containerelements mithilfe von Flexbox in einfachem CSS organisieren möchten, müssen Sie die verwenden Anzeige: flex Eigentum.

Behälter { Anzeige: biegen; }

Aber mit React Native müssen Sie das nicht einstellen Anzeige: flex Eigentum. Dies liegt daran, dass React Native standardmäßig Flexbox verwendet, um Layouts zu erstellen.

Hier sind einige Unterschiede, die Sie beachten sollten wie sich Flexbox verhält, wenn es zum Ausrichten von HTML-Elementen verwendet wird in Web-Apps gegenüber dem Verhalten in React Native:

• flexDirection standardmäßig auf Reihe in Webanwendungen, standardmäßig jedoch Spalte in React Native.
• Ausrichtungsinhalt standardmäßig auf strecken in Webanwendungen u Flexstart in React Native.
• flexShrink standardmäßig 1 im Web und 0 in React Native.

Verwenden von Flexbox-Eigenschaften in React Native

Mit den Flexbox-Eigenschaften können Sie beschreiben, wie die untergeordneten Elemente des Containerelements ausgerichtet werden. Sie müssen diese Eigenschaften verstehen, um komplexe Layouts zu erstellen, die den Anforderungen Ihrer Anwendung entsprechen.

1. Verwenden der Flex-Eigenschaft in React Native

Der biegen Eigenschaft bestimmt, wie die Sicht Komponente füllt den Bildschirm aus. Diese Eigenschaft akzeptiert einen ganzzahligen Wert größer oder gleich 0. Der Wert gibt den Bruchteil des Bildschirms an Sicht Komponente aufnehmen soll.

In diesem Beispiel erstellen Sie einen Bildschirm mit einer einzigen Ansicht aus der Reagieren Sie auf eine native Komponentenbibliothek:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
ExportStandardFunktionApp() {
zurückkehren (
 <>
Hintergrundfarbe: "#A020F0", biegen: 1}} /> 
 </>
 )
}

Hier ist die Ausgabe:

Hier haben Sie die 1 als Flex-Wert der zugewiesen Sicht Komponente. Der Sicht Komponente nimmt den gesamten Bildschirm (100 %) ein, weil Sie den Raum in eine Gruppe aufgeteilt haben.

Schauen wir uns ein weiteres Beispiel an:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
ExportStandardFunktionApp() {
zurückkehren (

Hintergrundfarbe: "#A020F0", biegen: 1}} />
Hintergrundfarbe: "#7cb48f", biegen: 3 }} /> 
 </View>
 )
}

Hier ist das Ergebnis:

Hier hast du zwei Sicht Elemente in einem anderen Sicht Element. Das erste Kind ist eingestellt Flex: 1, und die zweite ist auf eingestellt Flex: 3. Diese Werte teilen den Raum zwischen den beiden Kindern. Der erste nimmt 1/4 des Bildschirms ein, während der zweite 3/4 des Bildschirms einnimmt (der Bildschirm ist in 4 Blöcke aufgeteilt, weil 1+3 = 4).

2. Verwenden der flexDirection-Eigenschaft in React Native

Wenn Sie sich den obigen Screenshot ansehen, sehen Sie, dass die untergeordneten Elemente übereinander liegen. Dies ist das Standardverhalten von Flexbox in React Native (flexDirection standardmäßig auf die Spalte Wert).

Sie können auch die einstellen flexDirection Eigentum zu Reihe, Spaltenrückseite, Und Zeilenumkehrung. Im folgenden Beispiel flexDirection ist eingestellt auf Reihe, daher werden die untergeordneten Elemente nebeneinander platziert:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
konst Stile = StyleSheet.create({
 Behälter: {
 Hintergrundfarbe: "#00FF00",
 biegen: 1,
 ausrichtenItems: "Center",
 flexRichtung: "Reihe",
 },
 Quadrat: {
 Hintergrundfarbe: "#FF0000",
 Breite: 98,
 Höhe: 98,
 Rand: 4,
 },
});
ExportStandardFunktionApp() {
zurückkehren (




 </View>
 )
}

Hier ist das Ergebnis:

Einstellung der flexDirection Zu Zeilenumkehrung stellt die Kinder Seite an Seite, aber es kehrt die Reihenfolge um. Ebenso die Spaltenrückseite platziert die untergeordneten Elemente übereinander, jedoch in umgekehrter Reihenfolge zu der durch die definierten Spalte.

3. Verwendung von justifyContent in React Native

Der Inhalt begründen -Eigenschaft richtet die untergeordneten Elemente eines Flexbox-Containers entlang der Primärachse aus. Wenn die flexDirection ist eingestellt auf Spalte, dann ist die Hauptachse die vertikale Achse. Wenn es so eingestellt ist Reihe, dann ist es horizontal.

Die möglichen Werte von Inhalt begründenSind Flexstart, Flex-Ende, Center, Zwischenraum, Raum herum, Und raumgleich.

Im folgenden Beispiel flexDirection auf Reihe und gesetzt ist Inhalt begründenist eingestellt auf Flexstart:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
konst Stile = StyleSheet.create({
 Behälter: {
 Hintergrundfarbe: "#00FF00",
 biegen: 1,
 begründenInhalt: "Flex-Start",
 flexRichtung: "Reihe",
 },
 Quadrat: {
 Hintergrundfarbe: "#FF0000",
 Breite: 98,
 Höhe: 98,
 Rand: 6,
 },
});
ExportStandardFunktionApp() {
zurückkehren (




 </View>
 )
}

Hier ist die Ausgabe:

Wenn Sie die ändern flexDirection Zu Spalte, Flexstart gilt für die vertikale Achse. Die Kisten werden also übereinander gestapelt.

Einstellung Inhalt begründen zu zentrieren (während die primäre Achse a ist Spalte) zentriert die drei untergeordneten Felder.

4. AlignItems in React Native verwenden

Der ausrichtenItems -Eigenschaft bestimmt die Platzierung von Elementen in einem Flexbox-Container entlang der sekundären Achse. Dies ist das Gegenteil von Inhalt begründen. So wie Inhalt begründen kümmert sich um die vertikale Ausrichtung, ausrichtenItems behandelt die horizontale Ausrichtung. Die möglichen Werte von ausrichtenItems Sind Flexstart, Flex-Ende, Center, Und Grundlinie.

Im folgenden Beispiel flexDirection ist eingestellt auf Reihe Und ausrichtenItemsist eingestellt auf Flexstart:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
konst Stile = StyleSheet.create({
 Behälter: {
 Hintergrundfarbe: "#00FF00",
 biegen: 1,
 ausrichtenItems: "Flex-Start",
 flexRichtung: "Reihe",
 },
 Quadrat: {
 Hintergrundfarbe: "#FF0000",
 Breite: 98,
 Höhe: 98,
 Rand: 6,
 },
});
ExportStandardFunktionApp() {
zurückkehren (





 </View>
 )
}

Hier ist die Ausgabe:

Wenn Sie die einstellen flexDirection Eigentum zu Spalte Und ausrichtenItems Zu Center, werden die Boxen übereinander platziert und die untergeordneten Elemente werden zentriert ausgerichtet.

5. Verwenden von alignSelf in React Native

Der sich selbst ausrichten -Eigenschaft bestimmt, wie sich ein einzelnes untergeordnetes Element im Container ausrichten soll. Es überschreibt ausrichtenItems, und die möglichen Werte sind Flexstart, Flex-Ende, Center, Und Grundlinie.

Im folgenden Beispiel legen wir einen Standardwert fest ausrichtenItems -Eigenschaft und überschreiben Sie sie mit sich selbst ausrichten:

importieren Reagieren aus"reagieren"
importieren { Stylesheet, Ansicht } aus"reaktionsnativ"
konst Stile = StyleSheet.create({
 Behälter: {
 Hintergrundfarbe: "#00FF00",
 biegen: 1,
 ausrichtenItems: "Center", 
 begründenInhalt: "Center", 
 flexRichtung: "Reihe",
 },
 Quadrat: {
 Hintergrundfarbe: "#FF0000",
 Breite: 98,
 Höhe: 98,
 Rand: 6,
 },
});
ExportStandardFunktionApp() {
zurückkehren (


sich selbst ausrichten: "Flex-Ende" }]} />
sich selbst ausrichten: "Flex-Start" }]} /> 
 )
}

Hier ist das Ergebnis:

Andere Flexbox-Eigenschaften

Es gibt zwei weitere Eigenschaften, die Sie beim Erstellen eines Flexbox-Layouts in React Native verwenden können:

• flexWrap: Falls die Kinder eines Containers überlaufen. Verwenden flexWrap um anzugeben, ob sie auf eine einzelne Zeile verkleinert oder in mehrere Zeilen umbrochen werden sollen. Mögliche Werte für flexWrap Sind jetztrap Und wickeln.
• Lücke: Sie verwenden die Lücke -Eigenschaft, um Lücken zwischen den Rasterelementen im Container hinzuzufügen. Sein Wert sollte der Größe der gewünschten Lücke zwischen den Elementen entsprechen. Sie können die angeben Lücke Eigentum Verwendung von CSS-Einheiten wie px, em oder rem.

Erfahren Sie mehr über React Native

Jetzt, da Sie Flexbox verstehen und wissen, wie Sie es in Ihrer React Native-App verwenden können, um flexible und reaktionsschnelle Layouts zu erstellen, ist es an der Zeit, dass Sie sich mit den Einzelheiten von React Native befassen.