Nachdem dieser Eingabecontainer definiert und einige neue Stile behandelt wurden, können wir etwas tun,
von dem ich erwähnte, dass es immer eine gute Idee
wäre, unsere Anwendung in mehrere Komponenten aufzuteilen.
Dieser Look hier,
dieser Input-Container-Look, dieser Karten-Look möchten wir wahrscheinlich auch in anderen Teilen der Anwendung
verwenden.
Möglicherweise haben wir verschiedene Artikel, die wir auf einer solchen Karte
präsentieren möchten. Denken Sie daran, dass Sie einen Online-Shop aufbauen, in dem Sie jedes
Produkt auf einer solchen Karte auf dem Übersichtsbildschirm haben. Um zu vermeiden, dass diese Stildefinition immer wieder wiederholt
wird, können wir sie in eine separate Komponente auslagern, eine Komponente, die nicht wirklich viel Logik
enthält, aber die Gestaltung
ihres Inhalts steuert, daher eine reine Präsentationskomponente. Technisch gesehen handelt es sich immer noch um eine reguläre React-Komponente. Daher werde ich
hier im Komponentenordner eine neue Datei erstellen und sie als Karte bezeichnen. Der Name liegt bei Ihnen, aber es ist dieser typische
Kartenlook, also klingt
es für mich wie ein passender Name.
Importieren Sie hier wie immer React from React und importieren Sie dann auch die Ansicht von React Native hier und erstellen
Sie dann die Kartenkomponente, eine Funktionskomponente wie diese, die Sie am Ende standardmäßig exportieren, und natürlich dreht sich hier alles um die
Präsentation Das Stylesheet
wird benötigt, um ein Style-Objekt zu erstellen, da dies das Kernstück dieser Komponente ist.
Es sollte vorhanden sein, um
sich um jeden Inhalt zu wickeln und nur ein allgemeines Styling anzuwenden.
Jetzt gehe ich zum Startbildschirm und greife hier auf alle Stile des Eingabecontainers zu, kopiere sie
von dort und füge sie stattdessen der Karte hinzu. Hier füge ich eine neue Karteneigenschaft hinzu
und
verwende meine Stile hier und innerhalb der Kartenkomponente.
Ich habe sozusagen ein sehr einfaches Markup, sehr einfachen JSX-Code.
Es ist nur eine Ansicht, die ich hier zurückkehre und die sich um Requisitenkinder drehen sollte. Requisitenkinder
sind die speziellen Requisiten in React, die im Grunde den Inhalt darstellen, den Sie zwischen den
öffnenden und schließenden Tags Ihrer benutzerdefinierten Komponente übergeben. Es kann sich also um jeden Inhalt wickeln, da
das einzige Ziel dieser Kartenkomponente darin besteht, einen Stil auf den umgebenden Container anzuwenden. Dazu fügen wir hier eine Stilkarte hinzu.
Jetzt gibt es nur eine Sache: Hier gibt es bestimmte Stile, die wahrscheinlich nicht von der Innenseite der Karte
aus eingestellt
werden sollten. Nicht jede Karte hat möglicherweise diese Breite oder maximale Breite, und nicht jede Karte sollte ihren Inhalt zentrieren.
Daher schneide ich diese drei Elemente von dort aus und habe nur den Schatten und die
Polsterung hier eingerichtet, und ich möchte dies etwas flexibler gestalten.
Neben den Kartenstilen wäre es schön, wenn wir auch unsere eigenen Stile von außen
zuweisen und vielleicht sogar einige der Kartenstile überschreiben könnten. Wir können dies tun, indem wir ein neues Objekt an die
Stilstütze übergeben und alle Eigenschaften, alle Schlüssel-Wert-Paare unseres Kartenstils hier in diesem neuen Objekt verteilen.
Dies ist der Spread-Operator, eine moderne Javascript-Funktion, die alle Schlüssel-Wert-Paare eines Objekts aus diesem Objekt
herauszieht und einem neuen umgebenden Objekt hinzufügt.
Also kopieren wir alle dort unten definierten Stile in dieses neue
Objekt und mache dies, damit ich hier auch ein weiteres Schlüssel-Wert-Paar oder einen anderen Satz von Schlüssel-Wert-Paaren
hinzufügen kann, wobei ich alle in Requisitenstilen definierten Stile übernehme. In der Stil-Requisite, die ich an meine eigene benutzerdefinierte Komponente
übergeben
habe, nehme ich alle dort definierten Schlüssel-Wert-Paare und füge sie in dieses Objekt ein. Da ich dies
in dieser Sekunde mache, überschreibt dies alle in der Stilkarte eingerichteten Schlüssel-Wert-Paare. Damit wir alle dort
eingerichteten Stile von außen überschreiben können, wenn wir
unsere Komponente verwenden und wenn wir zusätzliche Stile außerhalb der Komponente hinzufügen, wird dies auch
zusammengeführt und berücksichtigt, und damit können wir auch unsere eigenen Stile von außen zuweisen Wenn wir die
Kartenkomponente verwenden und die Kartenkomponente verwenden, ist dies als nächster Schritt sinnvoll.
Gehen wir also zu diesem Startbildschirm und importieren die Karte aus dem Komponentenordner und dort aus
dem Kartenordner und ersetzen unsere Eingabecontaineransicht hier durch eine Karte wie diese, genau wie diese, durch Öffnen und
Schließen von Tags.
Jetzt möchte ich wieder meine eigenen Stile festlegen, ich möchte meine eigene Breite, maximale Breite
festlegen und Elemente ausrichten, damit ich den Eingabecontainer im
Stylesheet dort unten behalte, aber jetzt alle anderen Stile dort alle los werde die Stile, die jetzt in der
Karte
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
akzeptiert wird oder einen Effekt hat, weil es in der Kartenkomponente diese Stilstütze ist, die Ich verschmelze mit
meinen anderen Stilen, daher zeige ich für diese Stil-Requisite auf den Stileingabe-Container. Wenn wir das speichern, wird eine Fehlermeldung
angezeigt. Das Objekt
ist keine Funktion in der Nähe des React Native-Stylesheets.
Also in der Karte. js Datei, wie sie hier zeigt, etwas stimmt nicht, gibt mir sogar
die Zeilennummer, es ist Zeile 10, das bedeutet diese Nummer hier und ja, mein Problem hier ist, dass ich Stylesheet wie dieses verwende,
das ist
falsch, stattdessen müssen wir Stylesheet aufrufen . create, um unsere eigenen Stile zu definieren, das ist
also die richtige Syntax.
Es handelt sich also um einen Syntaxfehler, technisch gesehen nicht um einen Syntaxfehler, aber ich verwende das Stylesheet-Objekt falsch.
Es ist also ein Fehler von meiner Seite, die Fehlermeldung hat uns dabei geholfen und jetzt
sehen wir genauso aus wie zuvor, aber wir haben diese wiederverwendbare Karte, die wir jetzt an jedem Ort verwenden können, an dem wir
genau diesen Blick mit den Schatten und haben möchten bald.