Um nun unsere Liste der Ziele auszugeben, möchte ich hier in der Ansicht zunächst einige Textkomponenten ausgeben, in denen ich
einfach mein Ziel drucke. Dazu können wir hier einen dynamischen Ausdruck mit einzelnen geschweiften und schließenden geschweiften Klammern eingeben und jetzt beziehen
wir uns auf Kursziele,
was diese Variable ist, die wir hier mit Array-Destrukturierung erhalten haben. Kursziele sind unsere Reihe von Zielen und jetzt, genau
wie bei normalem Reagieren, was
eine Differenzierung ist, die ich nicht wirklich mag, weil wir hier am Ende normales Reagieren verwenden.
So wie Sie
es von Reagieren für Webprojekte kennen, können Sie es jetzt Ordnen Sie dieses Datenarray mit der Map-Methode,
einer normalen Javascript-Methode, einem Array von Komponenten zu. Die Map-Methode übernimmt eine Funktion, die für jedes Element
im Array ausgeführt wird. Hier
erhalten wir
also unser Ziel und müssen hier eine neue Komponente zurückgeben. Ich werde wieder diese Inline-Pfeilfunktionssyntax verwenden, bei der ich,
anstatt geschweifte Klammern zu haben und dann etwas zurückzugeben, die geschweiften Klammern weglasse und die return-Anweisung
weglasse. Dies ist eine gültige Javascript-Syntax. Dies gibt auch alles
zurück, was ich hier eingebe.
Was ich zurückgeben möchte, ist eine Textkomponente. Daher können
wir diese Textkomponente, die wir aus React Native importiert haben, hier unser Ziel ausgeben, da ein Ziel in den Kurszielen nur ein Text ist,
da das, was wir zu den Kurszielen hinzufügen, das ist eingegebenes Ziel und das eingegebene Ziel ist
das, was wir durch Texteingabe erhalten, und das ist nur Text.
Hier geben wir jetzt nur Text aus und ordne alle meine Kursziele Textkomponenten
zu, die in dieser Ansicht hier ausgegeben werden. Und wenn wir dies speichern, sollten wir bereits in
der Lage sein,
einige Ziele hinzuzufügen. Lernen Sie also React Native ist eine Sache, die ich hier eingeben kann, klicken Sie auf Hinzufügen
und hier ist es,
lernen Sie es wirklich und wir bekommen dies auch und wenn du willst
auch ein paar Pfannkuchen machen, das kannst du auch und natürlich funktioniert das
auch unter iOS, lerne React Native wirklich und natürlich möchte ich noch ein paar Pfannkuchen machen.
Das funktioniert also und so können wir hier eine einfache, sehr triviale Liste von Elementen ausgeben.
Jetzt sehen diese Artikel natürlich ziemlich langweilig aus. Vielleicht können wir dort etwas Styling anwenden,
damit sie besser aussehen. Bevor wir dies tun,
beachten Sie bitte, dass hier in unserem Terminal ein Fehler vorliegt.
Jetzt funktioniert unsere App eindeutig, aber der Fehler, den wir hier bekommen, ist, dass jedes Kind
in einer Liste eine eindeutige Schlüsselstütze haben sollte, und das ist eine normale React-Regel, nichts React Native-spezifisches.
Wenn Sie dies einer Liste von Widgets zuordnen, sollten Sie hier immer einen Schlüssel zuweisen, damit React diese Liste
bei Bedarf effizient hinter den Kulissen aktualisieren kann. Sie tun dies, indem Sie hier eine Schlüsselstütze hinzufügen, und
dann sollte der Schlüssel eine eindeutige Kennung sein. Lassen
Sie uns jetzt mit dem Ziel selbst fortfahren, das nicht streng eindeutig ist. Sie könnten
dasselbe Ziel mit demselben Text zweimal eingeben, was Ihnen eine geben würde Fehler, aber
jetzt nehmen wir an, dass Sie das nicht
tun. Daher können wir das Ziel als Schlüssel verwenden. Wenn wir das tun, werden wir diese Warnung los.
Wenn ich jetzt React Native gelernt habe, kann ich dies ohne Fehler hinzufügen.
Wenn ich denselben Text zweimal hinzufüge, erhalte ich hier technisch gesehen nicht einmal einen Fehler, aber das wäre
falsch.
Hier ist der Fehler, weil ich zwei Kinder mit demselben Schlüssel habe.
Im Moment gehen wir einfach davon aus, dass Sie dies
nicht tun. Dies ist die normale Schlüsselregel, die Sie auch in der normalen Reaktion haben.
Nehmen wir also einfach an, Sie geben nicht zweimal dasselbe Ziel ein und fahren mit dem Styling dieser Elemente
fort, da sie im Moment nicht allzu aufregend aussehen.