1 00:00:02,290 --> 00:00:08,230 Nachdem dieser Eingabecontainer definiert und einige neue Stile behandelt wurden, können wir etwas tun, 2 00:00:08,270 --> 00:00:12,580 von dem ich erwähnte, dass es immer eine gute Idee 3 00:00:12,640 --> 00:00:16,380 wäre, unsere Anwendung in mehrere Komponenten aufzuteilen. 4 00:00:16,600 --> 00:00:17,800 Dieser Look hier, 5 00:00:17,800 --> 00:00:24,100 dieser Input-Container-Look, dieser Karten-Look möchten wir wahrscheinlich auch in anderen Teilen der Anwendung 6 00:00:24,100 --> 00:00:24,890 verwenden. 7 00:00:25,060 --> 00:00:28,450 Möglicherweise haben wir verschiedene Artikel, die wir auf einer solchen Karte 8 00:00:28,450 --> 00:00:32,680 präsentieren möchten. Denken Sie daran, dass Sie einen Online-Shop aufbauen, in dem Sie jedes 9 00:00:32,680 --> 00:00:39,160 Produkt auf einer solchen Karte auf dem Übersichtsbildschirm haben. Um zu vermeiden, dass diese Stildefinition immer wieder wiederholt 10 00:00:39,160 --> 00:00:45,130 wird, können wir sie in eine separate Komponente auslagern, eine Komponente, die nicht wirklich viel Logik 11 00:00:45,160 --> 00:00:46,950 enthält, aber die Gestaltung 12 00:00:47,080 --> 00:00:53,050 ihres Inhalts steuert, daher eine reine Präsentationskomponente. Technisch gesehen handelt es sich immer noch um eine reguläre React-Komponente. Daher werde ich 13 00:00:53,050 --> 00:00:58,450 hier im Komponentenordner eine neue Datei erstellen und sie als Karte bezeichnen. Der Name liegt bei Ihnen, aber es ist dieser typische 14 00:00:58,450 --> 00:00:59,400 Kartenlook, also klingt 15 00:00:59,410 --> 00:01:01,510 es für mich wie ein passender Name. 16 00:01:02,220 --> 00:01:11,290 Importieren Sie hier wie immer React from React und importieren Sie dann auch die Ansicht von React Native hier und erstellen 17 00:01:11,290 --> 00:01:20,830 Sie dann die Kartenkomponente, eine Funktionskomponente wie diese, die Sie am Ende standardmäßig exportieren, und natürlich dreht sich hier alles um die 18 00:01:21,310 --> 00:01:22,900 Präsentation Das Stylesheet 19 00:01:22,900 --> 00:01:28,630 wird benötigt, um ein Style-Objekt zu erstellen, da dies das Kernstück dieser Komponente ist. 20 00:01:28,630 --> 00:01:31,120 Es sollte vorhanden sein, um 21 00:01:31,120 --> 00:01:36,200 sich um jeden Inhalt zu wickeln und nur ein allgemeines Styling anzuwenden. 22 00:01:37,270 --> 00:01:42,600 Jetzt gehe ich zum Startbildschirm und greife hier auf alle Stile des Eingabecontainers zu, kopiere sie 23 00:01:42,700 --> 00:01:49,180 von dort und füge sie stattdessen der Karte hinzu. Hier füge ich eine neue Karteneigenschaft hinzu 24 00:01:49,180 --> 00:01:49,790 und 25 00:01:51,220 --> 00:01:54,880 verwende meine Stile hier und innerhalb der Kartenkomponente. 26 00:01:55,020 --> 00:01:59,670 Ich habe sozusagen ein sehr einfaches Markup, sehr einfachen JSX-Code. 27 00:01:59,670 --> 00:02:05,900 Es ist nur eine Ansicht, die ich hier zurückkehre und die sich um Requisitenkinder drehen sollte. Requisitenkinder 28 00:02:05,910 --> 00:02:11,880 sind die speziellen Requisiten in React, die im Grunde den Inhalt darstellen, den Sie zwischen den 29 00:02:11,880 --> 00:02:18,570 öffnenden und schließenden Tags Ihrer benutzerdefinierten Komponente übergeben. Es kann sich also um jeden Inhalt wickeln, da 30 00:02:18,570 --> 00:02:25,400 das einzige Ziel dieser Kartenkomponente darin besteht, einen Stil auf den umgebenden Container anzuwenden. Dazu fügen wir hier eine Stilkarte hinzu. 31 00:02:25,510 --> 00:02:32,610 Jetzt gibt es nur eine Sache: Hier gibt es bestimmte Stile, die wahrscheinlich nicht von der Innenseite der Karte 32 00:02:32,610 --> 00:02:33,790 aus eingestellt 33 00:02:33,810 --> 00:02:41,580 werden sollten. Nicht jede Karte hat möglicherweise diese Breite oder maximale Breite, und nicht jede Karte sollte ihren Inhalt zentrieren. 34 00:02:41,580 --> 00:02:47,220 Daher schneide ich diese drei Elemente von dort aus und habe nur den Schatten und die 35 00:02:47,220 --> 00:02:50,890 Polsterung hier eingerichtet, und ich möchte dies etwas flexibler gestalten. 36 00:02:50,970 --> 00:02:57,780 Neben den Kartenstilen wäre es schön, wenn wir auch unsere eigenen Stile von außen 37 00:02:57,780 --> 00:03:07,440 zuweisen und vielleicht sogar einige der Kartenstile überschreiben könnten. Wir können dies tun, indem wir ein neues Objekt an die 38 00:03:07,530 --> 00:03:13,730 Stilstütze übergeben und alle Eigenschaften, alle Schlüssel-Wert-Paare unseres Kartenstils hier in diesem neuen Objekt verteilen. 39 00:03:13,800 --> 00:03:20,400 Dies ist der Spread-Operator, eine moderne Javascript-Funktion, die alle Schlüssel-Wert-Paare eines Objekts aus diesem Objekt 40 00:03:20,460 --> 00:03:23,910 herauszieht und einem neuen umgebenden Objekt hinzufügt. 41 00:03:24,150 --> 00:03:28,170 Also kopieren wir alle dort unten definierten Stile in dieses neue 42 00:03:28,170 --> 00:03:34,170 Objekt und mache dies, damit ich hier auch ein weiteres Schlüssel-Wert-Paar oder einen anderen Satz von Schlüssel-Wert-Paaren 43 00:03:34,170 --> 00:03:41,370 hinzufügen kann, wobei ich alle in Requisitenstilen definierten Stile übernehme. In der Stil-Requisite, die ich an meine eigene benutzerdefinierte Komponente 44 00:03:41,370 --> 00:03:42,090 übergeben 45 00:03:42,090 --> 00:03:48,060 habe, nehme ich alle dort definierten Schlüssel-Wert-Paare und füge sie in dieses Objekt ein. Da ich dies 46 00:03:48,240 --> 00:03:53,760 in dieser Sekunde mache, überschreibt dies alle in der Stilkarte eingerichteten Schlüssel-Wert-Paare. Damit wir alle dort 47 00:03:53,760 --> 00:03:56,700 eingerichteten Stile von außen überschreiben können, wenn wir 48 00:03:56,700 --> 00:04:02,100 unsere Komponente verwenden und wenn wir zusätzliche Stile außerhalb der Komponente hinzufügen, wird dies auch 49 00:04:02,140 --> 00:04:08,160 zusammengeführt und berücksichtigt, und damit können wir auch unsere eigenen Stile von außen zuweisen Wenn wir die 50 00:04:08,160 --> 00:04:12,730 Kartenkomponente verwenden und die Kartenkomponente verwenden, ist dies als nächster Schritt sinnvoll. 51 00:04:12,750 --> 00:04:20,040 Gehen wir also zu diesem Startbildschirm und importieren die Karte aus dem Komponentenordner und dort aus 52 00:04:20,040 --> 00:04:28,220 dem Kartenordner und ersetzen unsere Eingabecontaineransicht hier durch eine Karte wie diese, genau wie diese, durch Öffnen und 53 00:04:28,220 --> 00:04:29,920 Schließen von Tags. 54 00:04:29,930 --> 00:04:35,420 Jetzt möchte ich wieder meine eigenen Stile festlegen, ich möchte meine eigene Breite, maximale Breite 55 00:04:35,510 --> 00:04:39,040 festlegen und Elemente ausrichten, damit ich den Eingabecontainer im 56 00:04:39,320 --> 00:04:46,030 Stylesheet dort unten behalte, aber jetzt alle anderen Stile dort alle los werde die Stile, die jetzt in der 57 00:04:46,100 --> 00:04:46,650 Karte 58 00:04:46,790 --> 00:04:54,920 eingerichtet sind, so dass wir nur die Breite und Ausrichtung hier beibehalten und diese dann hier zur Karte auf der Stilstütze hinzufügen, die 59 00:04:54,980 --> 00:05:01,280 akzeptiert wird oder einen Effekt hat, weil es in der Kartenkomponente diese Stilstütze ist, die Ich verschmelze mit 60 00:05:01,280 --> 00:05:10,250 meinen anderen Stilen, daher zeige ich für diese Stil-Requisite auf den Stileingabe-Container. Wenn wir das speichern, wird eine Fehlermeldung 61 00:05:10,250 --> 00:05:12,330 angezeigt. Das Objekt 62 00:05:12,350 --> 00:05:17,350 ist keine Funktion in der Nähe des React Native-Stylesheets. 63 00:05:17,420 --> 00:05:24,250 Also in der Karte. js Datei, wie sie hier zeigt, etwas stimmt nicht, gibt mir sogar 64 00:05:24,260 --> 00:05:30,890 die Zeilennummer, es ist Zeile 10, das bedeutet diese Nummer hier und ja, mein Problem hier ist, dass ich Stylesheet wie dieses verwende, 65 00:05:30,920 --> 00:05:31,640 das ist 66 00:05:31,640 --> 00:05:35,760 falsch, stattdessen müssen wir Stylesheet aufrufen . create, um unsere eigenen Stile zu definieren, das ist 67 00:05:35,780 --> 00:05:37,010 also die richtige Syntax. 68 00:05:37,010 --> 00:05:42,240 Es handelt sich also um einen Syntaxfehler, technisch gesehen nicht um einen Syntaxfehler, aber ich verwende das Stylesheet-Objekt falsch. 69 00:05:42,410 --> 00:05:46,430 Es ist also ein Fehler von meiner Seite, die Fehlermeldung hat uns dabei geholfen und jetzt 70 00:05:46,430 --> 00:05:52,420 sehen wir genauso aus wie zuvor, aber wir haben diese wiederverwendbare Karte, die wir jetzt an jedem Ort verwenden können, an dem wir 71 00:05:52,430 --> 00:05:55,280 genau diesen Blick mit den Schatten und haben möchten bald.