1 00:00:02,420 --> 00:00:08,930 Mit all dem in diesem Modul haben Sie viel darüber gelernt, wie Sie mit React Native echte Apps erstellen. 2 00:00:08,930 --> 00:00:11,780 Sie haben viel über die eingebauten Komponenten gelernt, 3 00:00:11,780 --> 00:00:16,370 Sie haben viel über das Styling gelernt und wie Sie die Dinge so 4 00:00:16,370 --> 00:00:17,300 gestalten, wie 5 00:00:17,300 --> 00:00:24,290 Sie es möchten und wie Sie die Dinge so gestalten, wie Sie es möchten, und auch, wie sich das Styling 6 00:00:24,320 --> 00:00:26,320 zwischen einigen Komponenten unterscheidet, zum Beispiel 7 00:00:26,390 --> 00:00:31,970 Bei Textkomponenten ist das Styling bis zu einem gewissen Grad kaskadiert, sodass Stile dort in verschachtelten 8 00:00:31,970 --> 00:00:39,770 Stilen vererbt werden. Dies nutzen wir im Spiel über dem Bildschirm, aber bei allen anderen Komponenten wie der Ansicht die Stile, die Sie 9 00:00:39,770 --> 00:00:45,880 darauf anwenden gelten wirklich nur für diese Ansicht und kaskadieren nicht, werden nicht mit verschachtelten untergeordneten Ansichten geteilt. 10 00:00:45,890 --> 00:00:52,010 Sie haben auch gelernt, wie Sie gängige Stile verwenden können, z. B. mit benutzerdefinierten Komponenten, wie z. B. 11 00:00:52,010 --> 00:00:58,100 unserem Textkörper, der eine allgemeine Schriftfamilie einrichtet, sodass wir anstelle des integrierten Textes Text verwenden können, wenn 12 00:00:58,130 --> 00:01:00,480 wir Text mit dieser Schriftfamilie möchten. 13 00:01:00,590 --> 00:01:04,190 Natürlich ist dies ein Konzept, das Sie für jedes gewünschte gemeinsame Styling verwenden können, 14 00:01:04,310 --> 00:01:09,980 so wie wir es auch für die Art von Karte tun, bei der wir eine prestigeträchtige Ansicht haben, um uns diesen schönen 15 00:01:10,010 --> 00:01:12,140 Kartenlook mit einem kleinen Schatten zu verleihen. 16 00:01:12,140 --> 00:01:17,450 Sie haben auch gelernt, wie Sie einige Themen mit Konstanten einrichten können, die Sie in verschiedene Dateien 17 00:01:17,870 --> 00:01:23,990 importieren können, sowohl für Farben hier als auch bei Bedarf, für Textstile oder für jeden anderen Stil, den Sie komponentenübergreifend teilen 18 00:01:23,990 --> 00:01:29,630 möchten, damit Sie ihn nicht verwenden. Sie müssen es nicht ständig neu schreiben, insbesondere in Fällen, in denen Sie 19 00:01:29,630 --> 00:01:33,120 dies nicht möchten oder in denen Sie keine separaten Komponenten erstellen können, 20 00:01:33,260 --> 00:01:36,070 wie wir dies beispielsweise für die Schriftfamilie tun. 21 00:01:36,250 --> 00:01:40,820 Wenn dies also nicht möglich ist, was im Fall der Farben schwierig gewesen 22 00:01:40,820 --> 00:01:47,690 wäre, weil wir Farben an allen möglichen Orten benötigen, dann sind solche gemeinsamen Stile oder gemeinsamen Konstanten eine großartige Möglichkeit, 23 00:01:47,690 --> 00:01:53,420 und im Allgemeinen hoffe ich, dass Sie ein Gefühl dafür bekommen, wie Sie sind Erstellen Sie Benutzeroberflächen 24 00:01:53,450 --> 00:01:58,820 mit integrierten Komponenten und mit Ihren eigenen benutzerdefinierten Komponenten, die dann auf den integrierten Komponenten aufbauen, 25 00:01:58,820 --> 00:02:02,120 und wie Sie daher nette React Native-Anwendungen erstellen können. 26 00:02:02,140 --> 00:02:07,390 Wir haben uns einige Kernkomponenten angesehen und daher möchte ich Ihnen auch eine kurze Zusammenfassung darüber geben, was 27 00:02:07,390 --> 00:02:09,710 Sie hier über diese Komponenten gelernt haben. 28 00:02:09,760 --> 00:02:15,080 Die wahrscheinlich wichtigste Komponente ist die Ansicht, bei der es sich um einen Container 29 00:02:15,100 --> 00:02:21,180 handelt, den Sie um andere Komponenten wickeln, um diese Komponenten dann anzuordnen oder bestimmte Containerstile wie Schatten, 30 00:02:21,190 --> 00:02:24,760 Rahmen, Hintergrundfarbe usw. hinzuzufügen. Genauso wichtig 31 00:02:24,760 --> 00:02:29,870 ist die Textkomponente, die Sie für die Textausgabe verwenden. 32 00:02:29,950 --> 00:02:36,130 Sie können Text auch in Text verschachteln, in dem sogar ein Stil geteilt wird, und Sie können im Allgemeinen steuern, 33 00:02:36,130 --> 00:02:41,980 wie Text ausgegeben werden soll, ob er sich selbst umbrechen soll, was die Standardeinstellung ist, oder ob nur eine 34 00:02:41,980 --> 00:02:43,070 oder zwei Zeilen 35 00:02:43,210 --> 00:02:49,450 ausgegeben werden sollen, und dort befindet sich die Textkomponente hilft Ihnen wirklich dabei, diese wertvollen Informationen an Ihre Benutzer auszugeben. 36 00:02:49,450 --> 00:02:53,860 Jetzt möchten Sie manchmal nicht nur Informationen ausgeben, sondern auch Informationen abrufen. Hierzu 37 00:02:53,860 --> 00:02:55,930 kann die Texteingabe hilfreich sein. 38 00:02:55,930 --> 00:03:00,760 Jetzt werden wir uns später im Kurs eingehender mit dem Abrufen von Benutzereingaben befassen. Sie haben jedoch bereits einen ersten Blick darauf geworfen, wie 39 00:03:00,760 --> 00:03:05,290 Sie sie formatieren und konfigurieren können und wie Sie sicherstellen können, dass Sie die richtigen Eingaben erhalten und dass Sie es sind Wenn 40 00:03:05,320 --> 00:03:11,210 Sie die Eingabe validieren, arbeiten Sie wirklich nur mit der Eingabe, die Sie benötigen. Wenn wir jetzt von Benutzereingaben sprechen, ist die Schaltfläche 41 00:03:11,210 --> 00:03:14,230 natürlich auch eine entscheidende Komponente, sei es die integrierte Schaltfläche 42 00:03:14,330 --> 00:03:19,070 oder Ihre eigene Schaltfläche, die Sie mit den berührbaren Komponenten erstellen können, die ebenfalls sehr 43 00:03:19,130 --> 00:03:20,960 wichtig sind und in denen Sie 44 00:03:20,960 --> 00:03:26,660 Listen von ausgeben müssen Daten haben Sie etwas über FlatList und die Bildlaufansicht gelernt, wobei der Hauptunterschied darin 45 00:03:26,750 --> 00:03:32,270 besteht, dass FlatList für sehr lange Listen oder Listen optimiert ist, bei denen Sie nicht wirklich wissen, 46 00:03:32,270 --> 00:03:35,790 wie lang sie sein werden, sie aber möglicherweise sehr lang sind, 47 00:03:35,930 --> 00:03:42,470 während die Bildlaufansicht ideal ist Jeder andere scrollbare Inhalt, der nicht unendlich lang ist, bei dem Sie sicherlich über die Grenzen 48 00:03:42,470 --> 00:03:48,410 des Bildschirms hinausgehen, aber nicht zu viel zusätzlichen Inhalt, denn wenn all dieser zusätzliche Inhalt gerendert wird, ohne dass 49 00:03:48,410 --> 00:03:54,110 er verwendet wird, ohne dass er für ihn sichtbar ist der Benutzer, dann verschwenden Sie Leistung und hier 50 00:03:54,110 --> 00:03:54,860 kommt 51 00:03:54,920 --> 00:03:56,710 FlatList ins Spiel, weil dadurch 52 00:03:56,780 --> 00:03:59,980 nur das gerendert wird, was der Benutzer wirklich sehen kann. 53 00:04:00,020 --> 00:04:05,330 Apropos, was der Benutzer sehen kann. In diesem Modul haben Sie auch gelernt, wie Sie Ihre eigenen benutzerdefinierten Schriftarten hinzufügen. Manchmal benötigen 54 00:04:05,330 --> 00:04:08,770 Sie keine Schriftart, sondern ein Bild. Außerdem haben Sie gelernt, wie Sie dies 55 00:04:08,900 --> 00:04:14,580 tun und wie Sie sowohl lokale als auch Netzwerk-Schriftarten einbeziehen Bilder und wie Sie diese Bilder so gestalten können, dass sie gut aussehen. 56 00:04:14,600 --> 00:04:20,240 Apropos Styling: Hierfür verwenden wir das Stylesheet, das keine Komponente, sondern eine Klasse oder 57 00:04:20,240 --> 00:04:22,130 ein Objekt von React 58 00:04:22,130 --> 00:04:28,190 Native ist. Der Vorteil der Verwendung dieses Stylesheets besteht nicht nur darin, dass Sie Ihre Styles 59 00:04:28,190 --> 00:04:35,090 aus dem jsx-Code herausholen Sie möchten relativ schlank und kurz und prägnant bleiben, erhalten aber auch eine automatische 60 00:04:35,180 --> 00:04:41,110 Validierung Ihrer Stile und React Native informiert Sie, wenn Sie einen Stil falsch verwenden, und 61 00:04:41,150 --> 00:04:47,860 dass Sie in Zukunft möglicherweise zusätzliche Leistungsoptimierungen erhalten. Aus diesem Grund können wir Sie nur ermutigen, diesen Abschnitt 62 00:04:47,860 --> 00:04:48,810 im Auge 63 00:04:48,820 --> 00:04:55,540 zu behalten, ihn vielleicht ein zweites Mal durchzugehen und ihn als Grundlage für Ihren weiteren Kursfortschritt zu verwenden, in dem wir 64 00:04:55,540 --> 00:05:01,570 alle diese Komponenten verwenden, mit denen wir gearbeitet haben, und in denen wir mehr schreiben werden Stile, in denen 65 00:05:01,570 --> 00:05:07,330 wir komplexere Benutzeroberflächen erstellen und in denen Sie diese Grundlagen, die Sie im zweiten und in diesem Kursmodul 66 00:05:07,330 --> 00:05:11,080 gelernt haben, wirklich benötigen, um dann erstaunliche React Native-Anwendungen zu erstellen. 67 00:05:11,080 --> 00:05:11,890 Also lasst uns weitermachen.