1 00:00:02,380 --> 00:00:08,210 Wir haben uns also bereits einige solide Grundlagen angesehen, die Sie zum Erstellen von React Native-Apps benötigen, um mit diesen 2 00:00:08,210 --> 00:00:10,050 Kernbausteinen arbeiten zu können, obwohl natürlich 3 00:00:10,190 --> 00:00:13,460 viele Dinge noch unklar sind, haben wir uns nicht wirklich genauer 4 00:00:13,460 --> 00:00:17,660 angesehen Styling und Layout und so weiter, aber eine Sache, die wir jetzt definitiv tun 5 00:00:17,780 --> 00:00:22,820 sollten, ist auch zu untersuchen, wie Sie Ihre eigenen Komponenten erstellen können, da wir bisher immer in 6 00:00:23,030 --> 00:00:25,780 der App gearbeitet haben. js Datei und Sie 7 00:00:26,000 --> 00:00:28,820 werden sicherlich keine größeren Apps in nur einer Datei 8 00:00:28,820 --> 00:00:31,360 erstellen, diese Datei würde schließlich super groß 9 00:00:31,430 --> 00:00:37,190 werden und wenn Sie eine benutzerdefinierte Komponente haben, die Sie wiederholen möchten, müssten wir jetzt unseren Code 10 00:00:37,190 --> 00:00:38,420 kopieren und einfügen. 11 00:00:38,660 --> 00:00:44,060 Lassen Sie uns also neue Komponenten erstellen und daher werde ich hier im Projekt einen neuen Ordner mit dem Namen 12 00:00:44,060 --> 00:00:49,020 Komponenten hinzufügen. Der Name liegt bei Ihnen. Da ich jedoch vorhabe, einige Komponenten dort zu speichern, ist 13 00:00:49,710 --> 00:00:55,250 der Name für mich und dort sinnvoll Sie möchten eine Komponente für das Listenelement und eine für unseren Eingabebereich erstellen. 14 00:00:55,340 --> 00:01:00,320 Lassen Sie uns dort zwei neue Dateien erstellen, und ich werde eine Namenskonvention für die 15 00:01:00,320 --> 00:01:09,440 Dateien haben, bei denen ich mit Großbuchstaben beginne und mein GoalItem habe. js, es ist natürlich eine Javascript-Datei und 16 00:01:09,440 --> 00:01:16,100 mein GoalInput. js Datei. Jetzt enthalten beide die normale React-Komponente. Beginnen wir 17 00:01:16,100 --> 00:01:21,830 also mit dem Zielelement und importieren Sie daher React aus React, genau wie Sie es in einem React for Web-Projekt tun müssen. 18 00:01:21,830 --> 00:01:29,570 Dann erstelle ich hier meine funktionale Komponente, ein Zielelement, das Requisiten erhält und das dann 19 00:01:29,570 --> 00:01:36,000 hier etwas jsx zurückgeben muss, und exportiere dies standardmäßig wie folgt. 20 00:01:36,090 --> 00:01:42,030 Jetzt muss das jsx, das ich dort rendern möchte, React Native-Komponenten oder andere benutzerdefinierte Komponenten verwenden, die dann wiederum React 21 00:01:42,060 --> 00:01:44,570 Native-Komponenten verwenden, und hier werde ich mit dem 22 00:01:44,730 --> 00:01:51,180 Inhalt fortfahren, den ich hier hatte. Also schneide ich es aus der App. js Datei und geben Sie es hier 23 00:01:51,180 --> 00:01:51,790 zurück. 24 00:01:52,450 --> 00:01:57,100 Um dies hier zu verwenden, müssen wir nun Ansicht und Text, also 25 00:01:57,100 --> 00:01:59,970 diese beiden Komponenten, aus React Native importieren. 26 00:01:59,980 --> 00:02:05,760 Importieren wir also hier Ansicht und Text von React-Native. 27 00:02:05,790 --> 00:02:10,410 Außerdem richte ich einige Stile ein und möchte das Stylesheet 28 00:02:10,410 --> 00:02:20,110 verwenden. Daher importiere ich dies auch hier und richte dann meine Styles-Konstante ein, die Sie natürlich mit Stylesheet create anders benennen 29 00:02:20,380 --> 00:02:26,990 können, und gehe zurück zur App. js Datei und greifen Sie hier zu meinem Listenelementstil, schneiden Sie ihn von dort aus und gehen Sie zum 30 00:02:26,990 --> 00:02:32,960 Zielelement und fügen Sie ihn hier zu diesem Objekt hinzu, das ich an das Stylesheet übergebe. erstellen. 31 00:02:33,020 --> 00:02:39,140 Nun sollte dies funktionieren, aber natürlich wird das, was ich hier ausgebe, nicht mehr auf Artikeldaten basieren. Stattdessen sollten 32 00:02:39,500 --> 00:02:46,550 wir erwarten, dass wir dies einfach als Requisiten erhalten, also entweder Requisitenkinder, damit es zwischen dem öffnenden und dem schließenden Tag 33 00:02:46,550 --> 00:02:53,210 unseres übermittelt werden kann benutzerdefinierte Komponente oder vielleicht Requisiten. Titel, was auch immer Sie wollen, 34 00:02:53,210 --> 00:02:59,770 ein Requisitenname Ihrer Wahl dann. Jetzt können wir unsere benutzerdefinierte Komponente, 35 00:02:59,770 --> 00:03:06,580 das Zielelement, verwenden, indem wir zur App zurückkehren. js-Datei und hier füge ich dem Zielelement einen Import mit einem Großbuchstaben 36 00:03:06,580 --> 00:03:15,370 G hinzu, damit React dies als benutzerdefinierte Komponente von erkennt. / components / GoalItem können Sie das weglassen. js und jetzt können wir 37 00:03:15,370 --> 00:03:24,550 das Zielelement hier unten im Renderelement als benutzerdefinierte Komponente verwenden, in diesem Fall als selbstschließende Komponente, da ich, 38 00:03:24,610 --> 00:03:30,220 da ich den Requisitentitel und keine Requisitenkinder verwende, zwischen dem Öffnen 39 00:03:30,220 --> 00:03:37,660 und Schließen nichts erwarte Tags meiner benutzerdefinierten Komponente. Ich erwarte jedoch eine Titel-Requisite, also setzen wir diese hier mit dem 40 00:03:37,660 --> 00:03:43,360 Titel und dann können wir hier auf Artikeldaten zeigen und dann auf das Objekt zugreifen, bei dem es sich 41 00:03:44,480 --> 00:03:53,210 um ein Objekt handelt, für das wir einen Werteschlüssel haben, und damit sollten wir immer noch sehen Wenn wir hier einige Ziele eingeben, erfahren Sie alles über RN. Ja, 42 00:03:54,870 --> 00:04:01,230 das sieht jetzt mit unserer benutzerdefinierten Komponente gut aus. Hier ist eine gute Vorgehensweise, damit Sie auch die Texteingabe 43 00:04:01,260 --> 00:04:07,320 und die Schaltfläche oder die gesamte Ansicht hier tatsächlich in unsere Zieleingabekomponente einfügen können. Dazu müssen Sie natürlich 44 00:04:07,320 --> 00:04:12,810 auch die Kommunikation zwischen der App verkabeln. js-Datei und die Zieleingabekomponente, die informiert werden 45 00:04:13,170 --> 00:04:18,930 sollen, wenn Benutzer diese Schaltfläche in der Zieleingabekomponente drücken und dann hier in der App Daten 46 00:04:18,930 --> 00:04:19,730 hinzufügen. js Datei. 47 00:04:20,280 --> 00:04:25,260 So würden Sie es auch in einem React for Web-Projekt machen. Wenn Sie also Erfahrung damit haben, sollte es kein 48 00:04:25,260 --> 00:04:30,860 Problem sein, sonst machen wir es in der nächsten Vorlesung zusammen, aber wenn Sie wissen, wie es geht, versuchen Sie es auf jeden 49 00:04:30,860 --> 00:04:32,250 Fall es jetzt zuerst alleine.