Jetzt gibt es eine Sache, die Sie bemerken werden.
Wenn Sie hier und hier ein Ziel eingeben, werde ich das gleiche Ziel schnell und immer
wieder verwenden, obwohl
mir dies einen Fehler gibt, die App jedoch weiterhin funktioniert. Ignorieren wir also die Warnung unten.
Wenn ich dies eingegeben habe, werden wir oft genug die Bildschirmgrenzen überschreiten, aber standardmäßig können
Sie nicht scrollen, und das kann sehr
verwirrend sein, wenn Sie mit React Native beginnen Wenn Sie aus
dem Internet kommen, können Sie
dort jederzeit einen Bildlauf durchführen. Der Browser macht Ihre Seite standardmäßig scrollbar, wenn Ihr Inhalt die Grenzen der
Seite überschreitet. Hier ist
das nicht dasselbe,
Sie werden nicht gescrollt, nur weil Ihr Inhalt die Grenzen Ihres Bildschirms überschreitet,
sondern Ihr Inhalt einfach nicht mehr erreichbar ist.
Das ist natürlich keine Option, das ist eine schreckliche Benutzererfahrung. Wir möchten
einen scrollbaren Inhalt haben, aber in nativen Apps muss explizit angegeben werden, dass diese Seite oder ein Teil dieser Seite scrollbar sein
sollte und dass es dieselbe ist in React Native daher.
Hier können wir also eine andere Komponente verwenden, die React Native gebacken hat, und das ist die Bildlaufansicht. Wie
der Name schon sagt, ist dies eine Ansicht, die scrollbar ist.
Jetzt können wir diese Ansicht hier, die unsere Listenelemente enthält, durch die Bildlaufansicht ersetzen. In der Bildlaufansicht haben Sie auch Eigenschaften, mit denen Sie sie konfigurieren
können. Sie können einfach Ihren Cursor hier
platzieren und auf die Kontrolltaste drücken, um eine Vorstellung davon zu bekommen, was Sie einstellen können, oder
die offiziellen Dokumente überprüfen,
auf die Sie beispielsweise horizontal einstellen könnten horizontal scrollen, aber hier lasse ich die Standardeinstellung, die
vertikales Scrollen ist, und wenn Sie dies nur hinzufügen, werden Sie sehen, dass, wenn ich hier ein Dutzend Mal "Learn React Native" hinzufüge,
ich diese
Seite ausfüllen kann, jetzt ist dies wie Sie scrollbar kann sehen, ich kann jetzt meinen Inhalt und nur den Teil scrollen,
der in der Bildlaufansicht eingeschlossen ist.
Wir hätten es um die gesamte Seite wickeln können, also hätten wir diese Ansicht hier durch eine Bildlaufansicht ersetzen
oder durch eine Bildlaufansicht umbrechen können, damit das auch funktioniert. Es ist auch etwas,
was wir tun können, und dann ist die gesamte Seite scrollbar. Wenn ich jetzt
hier Learn React Native hinzufüge, werden Sie sehen, dass jetzt
die gesamte Seite gescrollt wird. Hier unter iOS können Sie sogar ohne Elemente scrollen. Dies ist das
Standardverhalten von iOS, aber es springt natürlich immer zurück, aber es liegt an Ihnen, wo Sie sich befinden füge dies hinzu und hier
möchte ich nur einen Unterabschnitt des Bildschirms haben, der scrollbar ist, so dass ich diesen Abschnitt nur
mit der
Bildlaufansicht umschließe, aber dies ist natürlich eine super wichtige Komponente für alle Inhalte, bei denen du nicht garantieren kannst, dass
sie auf den passen Bildschirm.
Jetzt könnten Sie natürlich denken, dass Sie bei all diesen verfügbaren Gerätegrößen dies niemals garantieren können,
aber es gibt bestimmte Inhalte wie eine Eingabe und eine Schaltfläche, die Sie immer auf den
Bildschirm passen können und die es auch sein können konfiguriert, um die Größe so zu ändern, dass sie auf den Bildschirm
passt, während es andere Inhalte gibt, normalerweise Listen mit Daten wie diesen hier, bei denen Sie dies nicht garantieren
können und bei denen Sie erst nach 10 oder 20 Elementen wissen, dass sie definitiv jeden Bildschirm überschreiten und das ist
der Inhalte, die Sie in eine Bildlaufansicht einbinden möchten. Andere Inhalte wie Eingabeschaltflächen, fest codierter statischer Text,
sodass im
Grunde jeder Inhalt, bei dem Sie wissen, wie viele Elemente Sie im Voraus haben, normalerweise mit den
richtigen Werkzeugen auf einen Bildschirm gedrückt werden kann, nämlich mit der Flexbox, die auch während dieses Kurses funktioniert Bei dynamisch
generierten Inhalten wie diesen möchten Sie auf jeden Fall eine Bildlaufansicht.