Share
In diesem Lernprogramm erfahren Sie, wie Sie React Native-Apps einrichten und Layouts implementieren, die in Apps häufig verwendet werden. Dies umfasst das Stapellayout, das Rasterlayout und das absolute Layout. Ich gehe davon aus, dass Sie bereits über die Grundlagen des Styling einer React Native-App und über die Verwendung von CSS im Allgemeinen Bescheid wissen, so dass ich mich nicht allzu lange damit beschäftige StyleSheet.create und wie Sie den verschiedenen Elementen Stil verleihen.
Den vollständigen Quellcode für dieses Tutorial finden Sie auf GitHub.
Zur Vereinfachung verwenden wir React Native for Web. Mit dem React Native für Web Starter können wir problemlos ein neues React Native-Projekt starten, das im Browser ausgeführt werden kann. Dieser Code ist zu 100% mit dem React Native-Projekt kompatibel. Wir erstellen für jedes Layout, das wir implementieren, eine separate Komponente, damit Sie sie bei Bedarf problemlos in ein normales React Native-Projekt importieren können. Wir verwenden nur "React Native" für das Web, weil es einfacher ist, das System zum Laufen zu bringen.
Sie können die folgenden Befehle ausführen, um das Projekt einzurichten:
git clone https://github.com/grabcode/react-native-web-starter.git RNLayouts-CD RNLayouts rm -rf .git npm install
Sobald die Installation abgeschlossen ist, navigieren Sie im App / Komponenten Verzeichnis. Hier sind die Dateien, an denen wir hauptsächlich arbeiten werden.
Öffne das App.js Datei und ersetzen Sie den Standardcode durch Folgendes:
importieren Sie React, Component aus 'reagieren'; // Importiere die Komponenten, die wir hier erstellen werden Exportklasse App erweitert Component render () return (// Komponenten hier verwenden);
Später können Sie die Komponenten, die wir erstellen, importieren und aus dieser Datei rendern. Denken Sie daran, dass alle Komponenten, die wir im speichern Layouts Das Verzeichnis sollte nicht mit etwas anderem gerendert werden. Zum Beispiel, wenn wir haben Layouts / StackLayout.js, mache folgendes in App.js:
importieren Sie React, Component aus 'reagieren'; // Importiere die Komponenten, die wir hier erstellen, importiere StackLayout von './layouts/StackLayout'; Exportklasse App erweitert Component render () return ();
Sie können das Projekt bedienen, indem Sie den folgenden Befehl ausführen:
npm run dev
Auf diese Weise können Sie im Browser darauf zugreifen http: // localhost: 3000. Ein vollständiges Neuladen der Seite wird ausgelöst, wenn Sie Änderungen an den Dateien vornehmen, die aktuell aus dem importiert werden App.js Datei.
Layouts in React Native verwenden eine Untergruppe von Flexbox. (Ich sage "Teilmenge", da nicht alle Funktionen enthalten sind, die in der Flexbox-Spezifikation enthalten sind.) Wenn Sie also Flexbox bereits kennen, können Sie diese Fertigkeiten problemlos in React Native anwenden. Es ist auch erwähnenswert, dass es in React Native keine Floats oder prozentualen Einheiten gibt. Das bedeutet, dass Layouts nur mit Flexbox- und CSS-Positionierung erstellt werden können.
Die erste Art von Layout, die wir implementieren werden, ist das Stack-Layout. Zur vertikalen Ausrichtung werden Elemente übereinander gestapelt, während zur horizontalen Ausrichtung die Elemente nebeneinander angeordnet werden. Schauen wir uns zuerst die vertikale Ausrichtung an:
Hier ist der Code, um das Layout oben auszuführen:
Accentsconagua
importieren Sie React, Component aus 'reagieren'; importiere StyleSheet, View, Dimensions aus 'reag-native'; var height = Dimensions.get ('Fenster'); var box_count = 3; var box_height = height / box_count; Standardklasse exportieren VerticalStackLayout erweitert Component render () return ( ); const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', Box: height: box_height, box1: backgroundColor: '# 2196F3'), box2: backgroundColor: '# 8BC34A ', Box3: backgroundColor:' # e3aa1a '); Durch Aufbrechen des obigen Codes wird zunächst die Höhe des verfügbaren Speicherplatzes für die App ermittelt. Dann berechnen wir die Höhe der einzelnen Boxen. Da wir drei Boxen haben, teilen wir sie durch drei.
var height = Dimensions.get ('Fenster'); var box_count = 3; var box_height = height / box_count;Für das Markup sollten die Boxen in einem Container verpackt sein. Gemeinsame Stile sind in der Box Objekt und eindeutige Hintergrundfarben werden auf eindeutig benannte Objekte angewendet (box1, box2, box3):
Um Flexbox verwenden zu können, müssen Sie die biegen Eigenschaft auf dem Container. Der Wert ist die Menge an Speicherplatz, die er verbrauchen wird. Wenn es 1, Dies bedeutet, dass der gesamte verfügbare Speicherplatz verbraucht wird, sofern das Element keine Geschwister hat. Wir werden uns ein Beispiel für die Verwendung ansehen biegen mit Geschwistern später.
flexDirection ermöglicht die Angabe der Hauptachse des Layouts. Standardmäßig ist dies auf festgelegt Säule. Rahmen flexDirection zu Säule bedeutet, dass die untergeordneten Elemente des Containers vertikal (übereinander gestapelt) angeordnet werden, während der Container eingestellt wird Reihe bedeutet, dass die Kinder horizontal (nebeneinander) liegen. Um die gleiche Höhe zu erreichen, stellen Sie die Höhe ein Box auf den Wert, den wir zuvor berechnet haben.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column'), Box: height: box_height // set dieses, box1: backgroundColor: '# 2196F3', box2: backgroundColor : '# 8BC34A', Box3: backgroundColor: '# e3aa1a');
Hier ist ein Bild, das Ihnen hilft zu visualisieren, wie der Inhalt basierend auf dem Inhalt fließt flexDirection dass Sie angegeben haben.
Die Methode, die ich Ihnen gerade gezeigt habe, ist die manuelle Vorgehensweise. Verwendung der Maße Die Berechnung der Breite oder Höhe der Elemente schlägt fehl, wenn Ihre App sowohl die Ausrichtung als auch die Ausrichtung im Querformat unterstützt. Das liegt daran, dass, wenn der Benutzer sein Gerät umlegt, die zuvor berechnete Breite oder Höhe falsch ist. React Native berechnet es nicht automatisch für Sie neu, sodass die App seltsam aussieht.
Flexbox kann die Berechnung tatsächlich für Sie durchführen, wenn Sie nur die richtigen Werte angeben. Um das gleiche Layout wie oben zu erreichen, ohne die Maße, Sie müssen nur angeben flex: 1 für alle Felder anstelle der Angabe Höhe:
Box: flex: 1,
Dies ist jetzt ein Beispiel für die Verwendung biegen mit Geschwistern. Jetzt haben wir drei Geschwister mit dem gleichen biegen Wert. Dies bedeutet, dass alle drei den verfügbaren Platz seit der biegen Wert ist derselbe. (Sie können tatsächlich jeden verwenden biegen Wert, solange alle untergeordneten Elemente den gleichen Wert haben.)
Mit diesem Wissen können Sie jetzt Layouts mit Kopfzeile, Inhalt und Fußzeile erstellen:
// header box1: flex: 1, backgroundColor: '# 2196F3', // inhalt box2: flex: 10, backgroundColor: '# 8BC34A', // footer box3: flex: .5, backgroundColor: ' # e3aa1a '
So wird es aussehen:
Beachten Sie, dass dies statisch sein wird. Wenn Ihr Hauptinhalt also die maximal verfügbare Höhe überschreitet, wird der Rest Ihres Inhalts ausgeblendet. Wenn Sie davon ausgehen, dass Ihr Inhalt diese Grenze überschreitet, können Sie die integrierte Funktion verwenden ScrollView Komponente zum automatischen Generieren einer vertikalen Bildlaufleiste wie in Webseiten.
Um horizontale Stack-Layouts zu implementieren, müssen Sie lediglich das Layout ändern flexDirection zu Reihe.
container: flex: 1, flexDirection: 'Reihe',
Wenn wir die Box wechseln biegen Wert zurück zu 1, Daraus ergibt sich folgende Ausgabe:
Das einzige, was wir geändert haben, ist das flexDirection, was jetzt eingestellt ist Reihe. Da sind die Boxen alle auf eingestellt flex: 1, Sie haben die gleiche Breite und Höhe. Alle Ideen aus dem vertikalen Stapellayout gelten für dieses Konzept gleichermaßen.
Wenn Sie die Verteilung von untergeordneten Objekten in einem Container steuern möchten, verwenden Sie die justifyContent Eigenschaft auf dem Container.
Nachfolgend sind die fünf möglichen Werte aufgeführt, die mit dieser Eigenschaft verwendet werden können. In den folgenden Beispielen wird die Höhe jedes der Kinder verringert, um zu zeigen, wie jedes Kind aussehen würde. Sie könnten keinen Unterschied erkennen, wenn die biegen Wert war 1 für jedes der Kinder, weil sie den gesamten verfügbaren Platz verbrauchen würden.
Flex-Start: Untergeordnete Elemente werden auf den Startpunkt ausgerichtet. Beachten Sie den weißen Hintergrund direkt unter dem letzten Kind. So wissen Sie, dass dies verwendet wird Flex-Start weil alle Kinder auf den Ausgangspunkt ausgerichtet sind. Dies lässt am Ende einen leeren Raum frei.
Flex-Ende: Untergeordnete Elemente werden in Richtung der Endlinie ausgerichtet. Beachten Sie, dass sich diesmal der leere Bereich am Startpunkt befindet.
Center: Untergeordnete Elemente werden zur Mitte hin platziert. Diesmal wird der leere Raum gleichmäßig zwischen Start- und Endpunkt aufgeteilt.
Raum um: Untergeordnete Elemente werden so verteilt, dass um jedes Element derselbe Platz steht. Dies bedeutet, dass die Elemente im äußeren Teil an der Außenseite weniger Platz haben und der Abstand zwischen den beiden Kindern verdoppelt wird.
Raum zwischen: Untergeordnete Elemente werden so verteilt, dass zwischen ihnen jeweils gleich viel Platz vorhanden ist. 
Wie Sie vielleicht bemerkt haben, hängt jede dieser Stileigenschaften von der Höhe oder Breite der untergeordneten Elemente ab. Es ist abhängig von der Breite, wenn die flexDirection ist Reihe, und auf der Höhe, wenn die flexDirection ist Säule.
Zum Beispiel, Raum zwischen hat keine Auswirkungen auf ein vertikales Stapellayout, wenn alle untergeordneten Elemente verwendet werden biegen um die Höhe zu kontrollieren. Dies liegt daran, dass für die Lücke zwischen den einzelnen untergeordneten Elementen kein Platz mehr bleibt.
Auf den ersten Blick, justifyContent und alignItems könnte so aussehen, als ob sie dasselbe tun. Sie teilen auch drei mögliche Werte: Flex-Start, Flex-Ende, und Center, mit dem Zusatz von a strecken Wert.
Der Hauptunterschied zwischen justifyContent und alignItems ist die Achse, auf der die Kinder verteilt sind. Wie du schon gesehen hast, justifyContent verwendet beim Verteilen von untergeordneten Elementen immer die primäre Achse. Aber alignItems verwendet die Achse gegenüber der primären.
Wir wissen bereits, dass die Achse durch die bestimmt wird flexDirection das wurde eingestellt. Also wenn der flexDirection ist Reihe, Die Primärachse fließt von links nach rechts. Dies bedeutet, dass die Querachse von oben nach unten fließt. Andererseits wenn flexDirection ist Säule dann fließt die Querachse von links nach rechts.
Nachfolgend einige Beispiele für justifyContent und alignItems Seite an Seite mit der implementiert flexDirection von Reihe. Der erste verwendet justifyContent während der zweite verwendet alignItems.
Flex-Start: Die Positionierung der Elemente ist gleich, weshalb die alignItems Implementierung sieht genau so aus justifyContent.
Flex-Ende: Jetzt sehen wir einen Unterschied. In der ersten Instanz ist es am Ende der Zeile der ersten Zeile, während die zweite Instanz an der Startzeile der letzten Zeile zu liegen scheint. 
Center: Center hat die gleiche Idee wie die übrigen Werte, die wir bisher verwendet haben. Im ersten Fall sind die Elemente auf der X-Achse zentriert, während im zweiten die Elemente auf der Y-Achse zentriert sind.
strecken: Verwenden Sie diese Option, um die untergeordneten Elemente zu strecken, um den Container zu füllen. Dies ist der Standardwert für alignItems, Die Angabe dieses Wertes ist daher optional. Wie das funktioniert, haben Sie bereits gesehen, als wir vertikale und horizontale Stapellayouts implementiert haben.Hier ist der Code, der in den obigen Beispielen verwendet wird. Spielen Sie einfach mit den Werten für flexDirection, justifyContent und alignItems Wenn Sie sehen wollen, wie sie aussehen:
importieren Sie React, Component aus 'reagieren'; importiere StyleSheet, View aus 'reag-native'; Standardklasse exportieren AlignItems erweitert Component render () return (); const styles = StyleSheet.create (wrapper: flex: 1), container: flex: .5, flexDirection: 'row', justifyContent: 'flex-start', // durch flex-end oder center borderBottomWidth ersetzen : 1, borderBottomColor: '# 000', container2: flex: .5, flexDirection: 'row', alignItems: 'flex-start' // durch Flex-End oder Mitte ersetzen, Box: width: 100, Höhe: 100, Box1: Hintergrundfarbe: '# 2196F3', Box2: Hintergrundfarbe: '# 8BC34A', Box3: Hintergrundfarbe: '# e3aa1a');
Wenn Sie die Ausrichtung einzelner Elemente innerhalb eines Containers festlegen möchten, können Sie das verwenden alignSelf Eigentum. Alle möglichen Werte für ausrichten gelten auch für diese Eigenschaft. So können Sie beispielsweise ein einzelnes Element rechts von seinem Container ausrichten, während alle übrigen Elemente nach links ausgerichtet sind.
React Native verfügt nicht wirklich über ein Rasterlayout-System, aber Flexbox ist flexibel genug, um eines zu erstellen. Mit den bisher gelernten Dingen können wir Grid-Layouts mit Flexbox neu erstellen. Hier ist ein Beispiel:
Und hier ist der Code, der dieses Layout erstellt:
importieren Sie React, Component aus 'reagieren'; importiere StyleSheet, View aus 'reag-native'; Standardklasse exportieren GridLayout erweitert Component render () return (); const styles = StyleSheet.create (row: flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10, Box: flex: 1, height: 100, backgroundColor: ' # 333 ',, box2: backgroundColor:' green ', box3: backgroundColor:' orange ', zwei: flex: 2);
Anhand des obigen Codes können Sie sehen, dass wir nachahmen, was sie normalerweise in CSS-Raster-Frameworks tun. Jede Zeile wird in einer separaten Ansicht eingeschlossen, und die Gitterelemente befinden sich darin. Ein Standard biegen Wert von 1 wird auf jedes Element angewendet, so dass es den in jeder Zeile verfügbaren Platz gleichermaßen teilt. Aber für Artikel, die einen größeren Speicherplatz benötigen, eine höhere biegen Wert wird angewendet. Dadurch wird die Breite der anderen Elemente automatisch angepasst, sodass alle Elemente aufgenommen werden können.
Wenn Sie Leerzeichen zwischen den einzelnen Elementen in einer Zeile einfügen möchten, können Sie jedem Element eine Auffüllung hinzufügen und dann in jedem Element ein Feld erstellen.
Daraus ergibt sich folgende Ausgabe:
React Native unterstützt nur absolut und relativ Positionierung. Dies sollte Sie jedoch nicht einschränken, da Sie diese immer mit Flexbox kombinieren können, um die verschiedenen Elemente an einer beliebigen Stelle zu positionieren.
Schauen wir uns an, wie wir folgendes erreichen würden:
Dies kann leicht erreicht werden, wenn wir die im Browser verfügbaren Positionswerte vollständig beherrschen. Da wir uns jedoch in React Native befinden, müssen wir zuerst an die Flexbox denken und dann die CSS-Positionierung für die kleinen Boxen verwenden.
Mit der Flexbox kann dies auf zwei Arten erreicht werden. Sie können entweder verwenden Reihe oder Säule für die flexDirection für den Hauptbehälter. Wie Sie die verschiedenen Elemente anordnen, hängt davon ab, welche Methode Sie wählen. Hier werden wir verwenden Reihe für die flexDirection Der Bildschirm wird also in drei Spalten unterteilt. Die erste Spalte enthält das orange Feld, die zweite Spalte enthält das schwarze, graue und grüne Feld und die dritte Spalte enthält das blaue und das kleine lila Feld.
importieren Sie React, Component aus 'reagieren'; importiere StyleSheet, View aus 'reag-native'; Standardklasse exportieren Positionierung erweitert Component render () return ();
Wenn Sie bereits wissen, wie die einzelnen Elemente dargestellt werden, müssen Sie nur die bisher Gelernten anwenden. Schließlich müssen wir die CSS-Positionierung nicht wirklich auf die großen Boxen anwenden, sondern nur auf die kleinen.
Die erste Spalte enthält nur das orangefarbene Kästchen, daher gilt dies justifyContent: 'center' zu seinem Behälter sollte den Trick tun. Falls Sie es schon vergessen haben, flexDirection Standardeinstellung ist Säule. Dies bedeutet, wenn Sie einstellen justifyContent zu Center, Die Kinder werden in der Mitte der Y-Achse ausgerichtet.
Die zweite Spalte hat grundsätzlich die gleiche Idee wie die erste, nur wollen wir dieses Mal nicht alle Kästchen auf die Mitte ausrichten. Was wir wollen, ist, dass sie gleiche Räume zwischen sich haben und justifyContent: 'Leerzeichen zwischen' erledigt diese Arbeit Gleichzeitig möchten wir aber auch alle Kinder auf der X-Achse zentrieren, damit wir sie verwenden alignItems: 'center'.
Der einzige knifflige Teil hier ist, dass Sie keine anwenden sollten Breite Eigenschaft für das graue Feld, weil wir möchten, dass es sich über die gesamte Breite des übergeordneten Elements erstreckt. Da haben wir keine beworben Breite, Wir sollten uns bewerben alignSelf: 'stretch' auf das graue Feld, damit es die volle Breite seines übergeordneten Elements verbraucht.
Um das kleine rote Kästchen etwas von seiner relativen Position entfernt zu positionieren, verwenden wir Position: relativ und dann bewerben oben und links Werte, da sich die relative Position in der oberen linken Ecke des übergeordneten Elements befindet.
Wie für die kleine orange Box verwenden wir Position: 'absolut' weil wir es an der oberen rechten Ecke des übergeordneten Elements ausrichten müssen. Dies funktioniert, weil absolut positionierte Elemente in React Native an das übergeordnete Element gebunden sind.
In der dritten Spalte wird grundsätzlich dieselbe Idee angewendet, daher werde ich sie nicht mehr erklären.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'row', links: flex: 1, justifyContent: 'center', middle: flex: 5, justifyContent: 'space-between' , alignItems: 'center', rechts: flex: 1, justifyContent: 'center', alignItems: 'flex-end', Feld: width: 100, height: 100, backgroundColor: '# 333', big_green_box : backgroundColor: 'green', big_orange_box: backgroundColor: 'orange', big_lightblue_box: backgroundColor: '# 03A9F4', big_gray_box: height: 100, alignSelf: 'stretch', backgroundColor: '#ccc' , innere_box: Breite: 20, Höhe: 20,, rote_box: Position: 'relativ', backgroundFarbe: 'rot', oben: 10, links: 10, orange_box: Position: 'absolute', backgroundColor: ' orange ', oben: 10, rechts: 10, purple_box: position:' absolute ', backgroundColor:' purple ', unten: 10, right: 10, black_box: position:' relative ', backgroundColor:' black ' );
Als Nächstes versuchen wir, ein festes Kopf- und Fußzeilenlayout zu implementieren. Dies ist häufig in Apps zu finden, die über eine Tabulatornavigation verfügen. Die Registerkarten befinden sich am unteren Rand des Bildschirms, während der Hauptinhalt gescrollt werden kann.
Um dies zu erreichen, müssen wir die ScrollView Wenn der Hauptinhalt die Höhe des Containers überschreitet, generiert React Native automatisch eine vertikale Bildlaufleiste. Dies erlaubt uns hinzuzufügen marginTop und marginBottom zu dem Hauptinhaltscontainer, damit die feste Kopf- und Fußzeile den Hauptinhalt nicht blockiert. Beachten Sie auch, dass die links und Recht Werte der Kopf- und Fußzeile werden auf gesetzt 0 damit verbrauchen sie die volle gerätebreite.
importieren Sie React, Component aus 'reagieren'; importieren Sie StyleSheet, View, ScrollView aus 'reag-native'; Standardklasse exportieren FixedHeaderFooter erweitert Component render () return (); const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', justifyContent: 'center', Kopfzeile: height: 40, Position: 'absolut', links: 0, rechts: 0 , top: 0, backgroundColor: '# 03A9F4', zIndex: 10, Inhalt: alignItems: 'center', marginTop: 50, marginBottom: 40, Fußzeile: height: 40, Position: 'absolut', links: 0, rechts: 0, unten: 0, backgroundColor: '# 8BC34A', Box: width: 100, height: 100, backgroundColor: '# 333', marginBottom: 10);
So wird es aussehen:
React Native hat eine große Community hinter sich, daher ist es kein Wunder, dass bereits einige Bibliotheken erstellt wurden, um die Implementierung von Layouts zu vereinfachen. In diesem Abschnitt werde ich Ihnen eine Bibliothek mit dem Namen React Native Easy Grid vorstellen. Sie können damit beschreiben, wie Sie Ihre App gestalten möchten, indem Sie die verwenden Gitter, Reihe, und Col Komponenten.
Sie können es mit dem folgenden Befehl installieren:
npm install rea-native-easy-grid --save installieren
Importieren Sie die Bibliothek und extrahieren Sie die verschiedenen Komponenten in Ihrer Datei.
importieren Sie React, Component aus 'reagieren'; importiere StyleSheet, View aus 'reag-native'; importiere Col, Row, Grid aus "React-Native-Easy-Grid";
Das Gitter Komponente wird zum Einwickeln von alles verwendet. Col wird verwendet, um eine Spalte zu erstellen, und Reihe wird zum Erstellen von Zeilen verwendet. Sie können ein angeben Größe Eigenschaft für beide Reihe und Col, obwohl wir es nur auf der verwendet haben Reihe unten. Wenn die Größe nicht angegeben wird, wird der verfügbare Speicherplatz gleichmäßig auf den Wert aufgeteilt Col Instanzen.
In diesem Fall gibt es nur zwei, so dass der gesamte Bildschirm in zwei Spalten unterteilt ist. Die erste Spalte ist dann in zwei Zeilen unterteilt. Hier haben wir a angegeben Größe, Sie können es jedoch überspringen, wenn Sie nur gleich große Reihen benötigen, wie wir es im Folgenden getan haben.
Export-Standardklasse FlexboxGridLibrary erweitert Component render () return (); |
|
Sobald dies erledigt ist, müssen Sie nur noch das Styling für die Zeilen und Spalten hinzufügen:
const styles = StyleSheet.create (orange_box: backgroundColor: 'orange'), grüne_box: backgroundColor: 'green', gray_box: backgroundColor: 'gray');
Wie Sie bemerkt haben, verfügt React Native Easy Grid über eine sehr intuitive API.
In diesem Lernprogramm haben Sie gelernt, wie React Native-Apps gestaltet werden. Sie haben insbesondere gelernt, wie Sie die Flexbox von React Native verwenden können, um Dinge herum zu positionieren. Sie haben auch gelernt, wie Sie mit React Native Easy Grid arbeiten, wodurch die Flexbox-Implementierung vereinfacht wird.
.
