Wir haben uns also bereits einige solide Grundlagen angesehen, die Sie zum Erstellen von React Native-Apps benötigen, um mit diesen
Kernbausteinen arbeiten zu können, obwohl natürlich
viele Dinge noch unklar sind, haben wir uns nicht wirklich genauer
angesehen Styling und Layout und so weiter, aber eine Sache, die wir jetzt definitiv tun
sollten, ist auch zu untersuchen, wie Sie Ihre eigenen Komponenten erstellen können, da wir bisher immer in
der App gearbeitet haben. js Datei und Sie
werden sicherlich keine größeren Apps in nur einer Datei
erstellen, diese Datei würde schließlich super groß
werden und wenn Sie eine benutzerdefinierte Komponente haben, die Sie wiederholen möchten, müssten wir jetzt unseren Code
kopieren und einfügen.
Lassen Sie uns also neue Komponenten erstellen und daher werde ich hier im Projekt einen neuen Ordner mit dem Namen
Komponenten hinzufügen. Der Name liegt bei Ihnen. Da ich jedoch vorhabe, einige Komponenten dort zu speichern, ist
der Name für mich und dort sinnvoll Sie möchten eine Komponente für das Listenelement und eine für unseren Eingabebereich erstellen.
Lassen Sie uns dort zwei neue Dateien erstellen, und ich werde eine Namenskonvention für die
Dateien haben, bei denen ich mit Großbuchstaben beginne und mein GoalItem habe. js, es ist natürlich eine Javascript-Datei und
mein GoalInput. js Datei. Jetzt enthalten beide die normale React-Komponente. Beginnen wir
also mit dem Zielelement und importieren Sie daher React aus React, genau wie Sie es in einem React for Web-Projekt tun müssen.
Dann erstelle ich hier meine funktionale Komponente, ein Zielelement, das Requisiten erhält und das dann
hier etwas jsx zurückgeben muss, und exportiere dies standardmäßig wie folgt.
Jetzt muss das jsx, das ich dort rendern möchte, React Native-Komponenten oder andere benutzerdefinierte Komponenten verwenden, die dann wiederum React
Native-Komponenten verwenden, und hier werde ich mit dem
Inhalt fortfahren, den ich hier hatte. Also schneide ich es aus der App. js Datei und geben Sie es hier
zurück.
Um dies hier zu verwenden, müssen wir nun Ansicht und Text, also
diese beiden Komponenten, aus React Native importieren.
Importieren wir also hier Ansicht und Text von React-Native.
Außerdem richte ich einige Stile ein und möchte das Stylesheet
verwenden. Daher importiere ich dies auch hier und richte dann meine Styles-Konstante ein, die Sie natürlich mit Stylesheet create anders benennen
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
Zielelement und fügen Sie ihn hier zu diesem Objekt hinzu, das ich an das Stylesheet übergebe. erstellen.
Nun sollte dies funktionieren, aber natürlich wird das, was ich hier ausgebe, nicht mehr auf Artikeldaten basieren. Stattdessen sollten
wir erwarten, dass wir dies einfach als Requisiten erhalten, also entweder Requisitenkinder, damit es zwischen dem öffnenden und dem schließenden Tag
unseres übermittelt werden kann benutzerdefinierte Komponente oder vielleicht Requisiten. Titel, was auch immer Sie wollen,
ein Requisitenname Ihrer Wahl dann. Jetzt können wir unsere benutzerdefinierte Komponente,
das Zielelement, verwenden, indem wir zur App zurückkehren. js-Datei und hier füge ich dem Zielelement einen Import mit einem Großbuchstaben
G hinzu, damit React dies als benutzerdefinierte Komponente von erkennt. / components / GoalItem können Sie das weglassen. js und jetzt können wir
das Zielelement hier unten im Renderelement als benutzerdefinierte Komponente verwenden, in diesem Fall als selbstschließende Komponente, da ich,
da ich den Requisitentitel und keine Requisitenkinder verwende, zwischen dem Öffnen
und Schließen nichts erwarte Tags meiner benutzerdefinierten Komponente. Ich erwarte jedoch eine Titel-Requisite, also setzen wir diese hier mit dem
Titel und dann können wir hier auf Artikeldaten zeigen und dann auf das Objekt zugreifen, bei dem es sich
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,
das sieht jetzt mit unserer benutzerdefinierten Komponente gut aus. Hier ist eine gute Vorgehensweise, damit Sie auch die Texteingabe
und die Schaltfläche oder die gesamte Ansicht hier tatsächlich in unsere Zieleingabekomponente einfügen können. Dazu müssen Sie natürlich
auch die Kommunikation zwischen der App verkabeln. js-Datei und die Zieleingabekomponente, die informiert werden
sollen, wenn Benutzer diese Schaltfläche in der Zieleingabekomponente drücken und dann hier in der App Daten
hinzufügen. js Datei.
So würden Sie es auch in einem React for Web-Projekt machen. Wenn Sie also Erfahrung damit haben, sollte es kein
Problem sein, sonst machen wir es in der nächsten Vorlesung zusammen, aber wenn Sie wissen, wie es geht, versuchen Sie es auf jeden
Fall es jetzt zuerst alleine.