Es gibt ein paar Dinge, bei denen
wir fortfahren könnten, aber ich möchte mit dem Eingabecontainer fortfahren, der der Container
um diese Eingaben ist, also um die Auswahl eines Zahlentextes, um die Texteingabe hier und um die Schaltflächen und dieser
Container hat eine Breite und es richtet die Elemente aus, aber
wie ich zuvor beschrieben habe, wäre es schön,
diese Karte dort zu haben, und dafür brauchen wir einige exotischere Stile, die wirklich ausgefallen klingen, aber
einfach einige Stilregeln, die wir vorher nicht verwendet haben.
Zum Beispiel möchte ich einen Schatten hinzufügen, einen leichten
Schlagschatten, und Sie tun dies mit vier Kerneigenschaften, die Sie verwenden können. Eine Farbe, ein Versatz, eine Deckkraft und ein Radius.
Jetzt sollte eine Schattenfarbe klar sein, es ist die Farbe Ihres Schattens.
Der Schattenversatz gibt an, um wie viel der Versatz von Ihrem Container
und tatsächlich das Objekt nimmt, das dann wiederum eine Breite und eine Höhe benötigt. Man
könnte also sagen, ich möchte den Schatten in Bezug auf die Breite um zwei Pixel und in Bezug auf
die Höhe um zwei Pixel versetzen , das beeinflusst den dreidimensionalen Effekt, den Sie erzeugen. Die Deckkraft beschreibt, wie transparent dieser Schatten ist. Wenn Sie die
Deckkraft auf 1 setzen,
haben Sie einen vollständig transparenten, also sehr gut sichtbaren starken Schatten. Wenn Sie diesen erhöhen oder verringern, sollte ich
sagen, wenn Sie ihn auf 0 setzen. 1 Zum Beispiel haben Sie
einen Schatten, den Sie kaum sehen können. Der Schattenradius beschreibt dann im Grunde, wie scharf
dieser Schatten ist, ob er raue Kanten hat oder ob er etwas verschwommener und weicher ist.
Also hier werde ich mit einer Schattenfarbe von Schwarz gehen, übrigens können Sie hier auch Hex-Codes
verwenden, wenn Sie möchten, und Sie können auch RGBA-Codes verwenden, wenn Sie dies bevorzugen, entweder normale RGB-Codes tatsächlich oder auch mit einem
Alpha Kanal, um Transparenz hier zu beschreiben. Obwohl die Transparenz hier keinen direkten Einfluss
hat, müssen Sie dies für Schatten mit Schattenopazität einstellen. Für andere Farben hätte es einen Einfluss,
aber das ist nur eine Randnotiz. Im Anhang finden Sie einen Link mit weiteren
Details dazu, wie Sie Farben konfigurieren können und welche Farbwerte React Native akzeptiert, da dies natürlich weitaus umfassender
ist als das, was ich hier zeigen kann. Ich werde nur den Namen verwenden, weil ich
ein Schwarz möchte Farbe, warum also nicht mit dieser Abkürzung gehen? Neben der Farbe erhält der Schatten hier auch einen
Versatz, und wie gesagt, der Versatz hier nimmt ein Objekt.
Wenn Sie sich jetzt fragen, woher ich das weiß, sagt mir meine IDE, wenn ich hier mit der Eingabe des Schattenversatzes
beginne, sehen Sie den Hinweis, den ich auf der rechten Seite bekomme. Normalerweise sollten Sie dies
auch erhalten, aber falls Sie dies nicht tun Wenn Sie dies erhalten, sind die offiziellen Dokumente natürlich der
richtige Ort. Dort können Sie immer unter Anleitungen, Komponenten und APIs auf die Ansichtskomponente klicken oder einfach auf
die API-Dokumente hier oben rechts klicken und dann Ihre Ansicht auswählen dort und da finden Sie einige Stil-Requisiten und dann finden Sie eine Liste aller unterstützten
Ansichtsstile und natürlich auch, wie Sie diese konfigurieren. Dort haben Sie beispielsweise gelernt, dass der Schattenversatz ein
Objekt mit einer Zahl ist und eine Höhe. Für die Farbe haben Sie gelernt, dass dies eine
Farbe ist, und genau diesen Link finden Sie hier, wo beschrieben wird, welche Art
von Farben Sie verwenden können.
Das ist also nur eine kleine Randnotiz. Hier verwende ich einen Schattenversatz mit einer Breite von Null, aber
einer Höhe von 2, so dass mein Schatten sozusagen ein wenig nach unten versetzt ist, also nicht so sehr nach rechts
eigentlich gar nicht rechts und ich werde dann auch einen Schattenradius hinzufügen, der eine Anzahl von ist. Lassen Sie uns sechs versuchen
und sehen, was
das tut und nicht zuletzt eine Schattenopazität von 0. 26, die relativ transparent ist, aber meiner Meinung nach
ganz gut aussieht.
Außerdem gebe ich meinem Eingabecontainer eine Hintergrundfarbe von Weiß, um sicherzustellen, dass er immer weiß und nicht transparent
ist. Dies ist ansonsten die Standardeinstellung. Wenn wir also eine andere Hintergrundfarbe hinter
dem Container haben, sagen wir als Grundfarbe von Auf dem gesamten Bildschirm hätte der Container
hier immer einen weißen Hintergrund.
Wenn Sie dies speichern, sollten Sie einen Schatten sehen, der unter iOS ungefähr
so aussieht, aber unter Android überhaupt keinen Schatten, und das ist
kein Fehler. Stattdessen funktionieren die Schatteneigenschaften hier nur unter iOS und das lässt einen wichtigen Frage, wie kann man dann
einen Schatten auf Android setzen? Ist das nicht möglich
Es ist aber da hast du eine spezielle Stilstütze, die Höhenstütze. Dies funktioniert nur unter Android, wie der Tooltip
auch hier zeigt, Plattform Android, während die Schatteneigenschaften nur unter iOS funktionieren. Jetzt nimmt die Höhe einfach eine Anzahl von beispielsweise
5 an und verwendet dann die Standardhöhe für das Android-Materialdesign, sodass Sie dort weniger Kontrolle
haben, aber andererseits erhalten Sie das Standard-Materialdesign, an das Ihre Benutzer
sowieso gewöhnt sein könnten Das Gute daran und jetzt haben wir auch hier
auf Android und iOS einen Schatten. Unter iOS werden Sie auch feststellen, dass der Schatten auch links
und rechts im Feld sichtbar ist, obwohl ich diesem einen Schattenversatz von 0 für die Breite gegeben habe, der jedoch
mit dem Schattenradius gesteuert werden kann, wenn Sie Schatten einstellen Radius auf Null, dann sehen Sie, dass Sie
nur den Schatten haben, in dem Sie seinen Versatz definiert haben, sodass Sie sicherstellen können, dass der Schatten
wirklich nur dort ist, wo Sie ihn haben möchten. Wenn Sie jedoch einen Schattenradius festlegen und standardmäßig
auch einen Standardschattenradius verwenden, erhalten Sie diesen Überlaufeffekt, der schließlich ein natürlicherer Schatten
ist. Hier ist es also tatsächlich der gewünschte Effekt. Damit habe ich einen Schatten sowohl auf Android mit
dem Standard-Android-Schatten als auch auf iOS hinzugefügt. Übrigens können Sie unter Android natürlich die
Höhenstufe ändern, um mit verschiedenen Höhenstufen herumzuspielen, bis Sie das gewünschte Aussehen für Ihre Anwendung haben
und im Grunde genug Schatten haben. Abgesehen davon, dass der Schatten hier ist,
denke ich, wäre es schön, jetzt etwas Polsterung in dieser Schachtel zu haben, da die Gegenstände viel zu
nahe an den Rändern sitzen, sie sitzen schließlich direkt an den Rändern. Um dies zu ändern, füge ich hier auch ein wenig Polsterung hinzu, und
das ist eine Polsterung von 20 und wieder, das ist ein Wert, mit dem Sie experimentieren können, finden Sie
die Polsterung, die Sie persönlich bevorzugen, und Sie denken, dass sie gut aussieht und wenn wir versuchen das, jetzt sieht das viel besser aus.
Außerdem wären abgerundete Ecken eine
schöne Sache, daher füge ich hier einen Randradius von beispielsweise 10 hinzu, um leicht abgerundete Ränder zu haben.
Wenn wir das jetzt speichern, sieht das für mich auf beiden Plattformen und auf beiden Geräten ziemlich süß aus.
Dies ist also jetzt der Eingabecontainer.
Wir können die Eingabe nicht sehen und die Schaltflächen sollten wahrscheinlich auch dieselbe Größe haben,
aber zumindest sieht der Container jetzt gut aus.