1 00:00:02,160 --> 00:00:08,820 Um nun unsere Liste der Ziele auszugeben, möchte ich hier in der Ansicht zunächst einige Textkomponenten ausgeben, in denen ich 2 00:00:08,820 --> 00:00:16,290 einfach mein Ziel drucke. Dazu können wir hier einen dynamischen Ausdruck mit einzelnen geschweiften und schließenden geschweiften Klammern eingeben und jetzt beziehen 3 00:00:16,290 --> 00:00:17,910 wir uns auf Kursziele, 4 00:00:18,390 --> 00:00:25,860 was diese Variable ist, die wir hier mit Array-Destrukturierung erhalten haben. Kursziele sind unsere Reihe von Zielen und jetzt, genau 5 00:00:25,860 --> 00:00:27,890 wie bei normalem Reagieren, was 6 00:00:28,110 --> 00:00:34,620 eine Differenzierung ist, die ich nicht wirklich mag, weil wir hier am Ende normales Reagieren verwenden. 7 00:00:34,800 --> 00:00:36,350 So wie Sie 8 00:00:36,750 --> 00:00:43,590 es von Reagieren für Webprojekte kennen, können Sie es jetzt Ordnen Sie dieses Datenarray mit der Map-Methode, 9 00:00:43,590 --> 00:00:50,280 einer normalen Javascript-Methode, einem Array von Komponenten zu. Die Map-Methode übernimmt eine Funktion, die für jedes Element 10 00:00:50,280 --> 00:00:52,230 im Array ausgeführt wird. Hier 11 00:00:52,230 --> 00:00:53,180 erhalten wir 12 00:00:53,190 --> 00:01:00,810 also unser Ziel und müssen hier eine neue Komponente zurückgeben. Ich werde wieder diese Inline-Pfeilfunktionssyntax verwenden, bei der ich, 13 00:01:00,810 --> 00:01:07,230 anstatt geschweifte Klammern zu haben und dann etwas zurückzugeben, die geschweiften Klammern weglasse und die return-Anweisung 14 00:01:07,230 --> 00:01:11,340 weglasse. Dies ist eine gültige Javascript-Syntax. Dies gibt auch alles 15 00:01:11,370 --> 00:01:13,980 zurück, was ich hier eingebe. 16 00:01:14,160 --> 00:01:17,740 Was ich zurückgeben möchte, ist eine Textkomponente. Daher können 17 00:01:17,880 --> 00:01:26,430 wir diese Textkomponente, die wir aus React Native importiert haben, hier unser Ziel ausgeben, da ein Ziel in den Kurszielen nur ein Text ist, 18 00:01:26,430 --> 00:01:32,280 da das, was wir zu den Kurszielen hinzufügen, das ist eingegebenes Ziel und das eingegebene Ziel ist 19 00:01:32,280 --> 00:01:36,100 das, was wir durch Texteingabe erhalten, und das ist nur Text. 20 00:01:36,570 --> 00:01:42,210 Hier geben wir jetzt nur Text aus und ordne alle meine Kursziele Textkomponenten 21 00:01:42,390 --> 00:01:49,630 zu, die in dieser Ansicht hier ausgegeben werden. Und wenn wir dies speichern, sollten wir bereits in 22 00:01:49,720 --> 00:01:51,130 der Lage sein, 23 00:01:51,220 --> 00:01:59,260 einige Ziele hinzuzufügen. Lernen Sie also React Native ist eine Sache, die ich hier eingeben kann, klicken Sie auf Hinzufügen 24 00:01:59,260 --> 00:02:00,950 und hier ist es, 25 00:02:01,050 --> 00:02:06,300 lernen Sie es wirklich und wir bekommen dies auch und wenn du willst 26 00:02:06,300 --> 00:02:11,610 auch ein paar Pfannkuchen machen, das kannst du auch und natürlich funktioniert das 27 00:02:11,980 --> 00:02:18,480 auch unter iOS, lerne React Native wirklich und natürlich möchte ich noch ein paar Pfannkuchen machen. 28 00:02:18,550 --> 00:02:23,960 Das funktioniert also und so können wir hier eine einfache, sehr triviale Liste von Elementen ausgeben. 29 00:02:23,980 --> 00:02:29,830 Jetzt sehen diese Artikel natürlich ziemlich langweilig aus. Vielleicht können wir dort etwas Styling anwenden, 30 00:02:29,830 --> 00:02:33,120 damit sie besser aussehen. Bevor wir dies tun, 31 00:02:33,340 --> 00:02:36,680 beachten Sie bitte, dass hier in unserem Terminal ein Fehler vorliegt. 32 00:02:36,730 --> 00:02:41,350 Jetzt funktioniert unsere App eindeutig, aber der Fehler, den wir hier bekommen, ist, dass jedes Kind 33 00:02:41,350 --> 00:02:46,190 in einer Liste eine eindeutige Schlüsselstütze haben sollte, und das ist eine normale React-Regel, nichts React Native-spezifisches. 34 00:02:46,300 --> 00:02:52,930 Wenn Sie dies einer Liste von Widgets zuordnen, sollten Sie hier immer einen Schlüssel zuweisen, damit React diese Liste 35 00:02:52,930 --> 00:02:58,750 bei Bedarf effizient hinter den Kulissen aktualisieren kann. Sie tun dies, indem Sie hier eine Schlüsselstütze hinzufügen, und 36 00:02:59,110 --> 00:03:01,730 dann sollte der Schlüssel eine eindeutige Kennung sein. Lassen 37 00:03:01,780 --> 00:03:05,890 Sie uns jetzt mit dem Ziel selbst fortfahren, das nicht streng eindeutig ist. Sie könnten 38 00:03:05,890 --> 00:03:09,970 dasselbe Ziel mit demselben Text zweimal eingeben, was Ihnen eine geben würde Fehler, aber 39 00:03:10,240 --> 00:03:12,650 jetzt nehmen wir an, dass Sie das nicht 40 00:03:12,670 --> 00:03:17,720 tun. Daher können wir das Ziel als Schlüssel verwenden. Wenn wir das tun, werden wir diese Warnung los. 41 00:03:17,720 --> 00:03:21,850 Wenn ich jetzt React Native gelernt habe, kann ich dies ohne Fehler hinzufügen. 42 00:03:21,850 --> 00:03:27,610 Wenn ich denselben Text zweimal hinzufüge, erhalte ich hier technisch gesehen nicht einmal einen Fehler, aber das wäre 43 00:03:27,610 --> 00:03:28,040 falsch. 44 00:03:28,040 --> 00:03:32,170 Hier ist der Fehler, weil ich zwei Kinder mit demselben Schlüssel habe. 45 00:03:32,200 --> 00:03:35,650 Im Moment gehen wir einfach davon aus, dass Sie dies 46 00:03:35,770 --> 00:03:40,580 nicht tun. Dies ist die normale Schlüsselregel, die Sie auch in der normalen Reaktion haben. 47 00:03:40,780 --> 00:03:46,210 Nehmen wir also einfach an, Sie geben nicht zweimal dasselbe Ziel ein und fahren mit dem Styling dieser Elemente 48 00:03:46,210 --> 00:03:48,910 fort, da sie im Moment nicht allzu aufregend aussehen.