1 00:00:02,200 --> 00:00:04,720 Es gibt ein paar Dinge, bei denen 2 00:00:04,740 --> 00:00:08,950 wir fortfahren könnten, aber ich möchte mit dem Eingabecontainer fortfahren, der der Container 3 00:00:08,980 --> 00:00:15,340 um diese Eingaben ist, also um die Auswahl eines Zahlentextes, um die Texteingabe hier und um die Schaltflächen und dieser 4 00:00:15,340 --> 00:00:18,970 Container hat eine Breite und es richtet die Elemente aus, aber 5 00:00:18,970 --> 00:00:21,820 wie ich zuvor beschrieben habe, wäre es schön, 6 00:00:21,820 --> 00:00:27,410 diese Karte dort zu haben, und dafür brauchen wir einige exotischere Stile, die wirklich ausgefallen klingen, aber 7 00:00:27,410 --> 00:00:30,450 einfach einige Stilregeln, die wir vorher nicht verwendet haben. 8 00:00:30,470 --> 00:00:34,080 Zum Beispiel möchte ich einen Schatten hinzufügen, einen leichten 9 00:00:34,110 --> 00:00:43,310 Schlagschatten, und Sie tun dies mit vier Kerneigenschaften, die Sie verwenden können. Eine Farbe, ein Versatz, eine Deckkraft und ein Radius. 10 00:00:43,310 --> 00:00:46,760 Jetzt sollte eine Schattenfarbe klar sein, es ist die Farbe Ihres Schattens. 11 00:00:46,760 --> 00:00:50,210 Der Schattenversatz gibt an, um wie viel der Versatz von Ihrem Container 12 00:00:50,210 --> 00:00:54,290 und tatsächlich das Objekt nimmt, das dann wiederum eine Breite und eine Höhe benötigt. Man 13 00:00:54,290 --> 00:00:59,390 könnte also sagen, ich möchte den Schatten in Bezug auf die Breite um zwei Pixel und in Bezug auf 14 00:00:59,390 --> 00:01:07,220 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 15 00:01:07,280 --> 00:01:08,990 Deckkraft auf 1 setzen, 16 00:01:08,990 --> 00:01:15,950 haben Sie einen vollständig transparenten, also sehr gut sichtbaren starken Schatten. Wenn Sie diesen erhöhen oder verringern, sollte ich 17 00:01:15,950 --> 00:01:21,800 sagen, wenn Sie ihn auf 0 setzen. 1 Zum Beispiel haben Sie 18 00:01:21,950 --> 00:01:28,910 einen Schatten, den Sie kaum sehen können. Der Schattenradius beschreibt dann im Grunde, wie scharf 19 00:01:28,910 --> 00:01:35,290 dieser Schatten ist, ob er raue Kanten hat oder ob er etwas verschwommener und weicher ist. 20 00:01:35,330 --> 00:01:40,610 Also hier werde ich mit einer Schattenfarbe von Schwarz gehen, übrigens können Sie hier auch Hex-Codes 21 00:01:40,610 --> 00:01:47,720 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 22 00:01:47,870 --> 00:01:53,270 Alpha Kanal, um Transparenz hier zu beschreiben. Obwohl die Transparenz hier keinen direkten Einfluss 23 00:01:53,270 --> 00:01:59,030 hat, müssen Sie dies für Schatten mit Schattenopazität einstellen. Für andere Farben hätte es einen Einfluss, 24 00:01:59,030 --> 00:02:04,100 aber das ist nur eine Randnotiz. Im Anhang finden Sie einen Link mit weiteren 25 00:02:04,100 --> 00:02:09,260 Details dazu, wie Sie Farben konfigurieren können und welche Farbwerte React Native akzeptiert, da dies natürlich weitaus umfassender 26 00:02:09,260 --> 00:02:14,030 ist als das, was ich hier zeigen kann. Ich werde nur den Namen verwenden, weil ich 27 00:02:14,030 --> 00:02:20,420 ein Schwarz möchte Farbe, warum also nicht mit dieser Abkürzung gehen? Neben der Farbe erhält der Schatten hier auch einen 28 00:02:20,510 --> 00:02:23,990 Versatz, und wie gesagt, der Versatz hier nimmt ein Objekt. 29 00:02:23,990 --> 00:02:31,040 Wenn Sie sich jetzt fragen, woher ich das weiß, sagt mir meine IDE, wenn ich hier mit der Eingabe des Schattenversatzes 30 00:02:31,040 --> 00:02:36,530 beginne, sehen Sie den Hinweis, den ich auf der rechten Seite bekomme. Normalerweise sollten Sie dies 31 00:02:36,530 --> 00:02:42,830 auch erhalten, aber falls Sie dies nicht tun Wenn Sie dies erhalten, sind die offiziellen Dokumente natürlich der 32 00:02:42,830 --> 00:02:49,100 richtige Ort. Dort können Sie immer unter Anleitungen, Komponenten und APIs auf die Ansichtskomponente klicken oder einfach auf 33 00:02:49,100 --> 00:02:57,800 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 34 00:02:57,860 --> 00:03:03,890 Ansichtsstile und natürlich auch, wie Sie diese konfigurieren. Dort haben Sie beispielsweise gelernt, dass der Schattenversatz ein 35 00:03:03,890 --> 00:03:10,040 Objekt mit einer Zahl ist und eine Höhe. Für die Farbe haben Sie gelernt, dass dies eine 36 00:03:10,040 --> 00:03:14,630 Farbe ist, und genau diesen Link finden Sie hier, wo beschrieben wird, welche Art 37 00:03:14,630 --> 00:03:16,740 von Farben Sie verwenden können. 38 00:03:17,030 --> 00:03:24,020 Das ist also nur eine kleine Randnotiz. Hier verwende ich einen Schattenversatz mit einer Breite von Null, aber 39 00:03:24,020 --> 00:03:32,030 einer Höhe von 2, so dass mein Schatten sozusagen ein wenig nach unten versetzt ist, also nicht so sehr nach rechts 40 00:03:32,030 --> 00:03:40,310 eigentlich gar nicht rechts und ich werde dann auch einen Schattenradius hinzufügen, der eine Anzahl von ist. Lassen Sie uns sechs versuchen 41 00:03:40,310 --> 00:03:41,870 und sehen, was 42 00:03:42,650 --> 00:03:49,970 das tut und nicht zuletzt eine Schattenopazität von 0. 26, die relativ transparent ist, aber meiner Meinung nach 43 00:03:49,970 --> 00:03:51,610 ganz gut aussieht. 44 00:03:51,850 --> 00:03:58,480 Außerdem gebe ich meinem Eingabecontainer eine Hintergrundfarbe von Weiß, um sicherzustellen, dass er immer weiß und nicht transparent 45 00:03:58,480 --> 00:04:03,370 ist. Dies ist ansonsten die Standardeinstellung. Wenn wir also eine andere Hintergrundfarbe hinter 46 00:04:03,370 --> 00:04:08,890 dem Container haben, sagen wir als Grundfarbe von Auf dem gesamten Bildschirm hätte der Container 47 00:04:08,920 --> 00:04:11,100 hier immer einen weißen Hintergrund. 48 00:04:11,140 --> 00:04:16,180 Wenn Sie dies speichern, sollten Sie einen Schatten sehen, der unter iOS ungefähr 49 00:04:16,180 --> 00:04:20,190 so aussieht, aber unter Android überhaupt keinen Schatten, und das ist 50 00:04:20,410 --> 00:04:28,120 kein Fehler. Stattdessen funktionieren die Schatteneigenschaften hier nur unter iOS und das lässt einen wichtigen Frage, wie kann man dann 51 00:04:28,120 --> 00:04:32,820 einen Schatten auf Android setzen? Ist das nicht möglich 52 00:04:33,070 --> 00:04:39,610 Es ist aber da hast du eine spezielle Stilstütze, die Höhenstütze. Dies funktioniert nur unter Android, wie der Tooltip 53 00:04:39,610 --> 00:04:48,280 auch hier zeigt, Plattform Android, während die Schatteneigenschaften nur unter iOS funktionieren. Jetzt nimmt die Höhe einfach eine Anzahl von beispielsweise 54 00:04:48,280 --> 00:04:55,090 5 an und verwendet dann die Standardhöhe für das Android-Materialdesign, sodass Sie dort weniger Kontrolle 55 00:04:55,090 --> 00:05:00,130 haben, aber andererseits erhalten Sie das Standard-Materialdesign, an das Ihre Benutzer 56 00:05:00,130 --> 00:05:06,070 sowieso gewöhnt sein könnten Das Gute daran und jetzt haben wir auch hier 57 00:05:06,340 --> 00:05:13,590 auf Android und iOS einen Schatten. Unter iOS werden Sie auch feststellen, dass der Schatten auch links 58 00:05:13,590 --> 00:05:19,840 und rechts im Feld sichtbar ist, obwohl ich diesem einen Schattenversatz von 0 für die Breite gegeben habe, der jedoch 59 00:05:19,840 --> 00:05:25,480 mit dem Schattenradius gesteuert werden kann, wenn Sie Schatten einstellen Radius auf Null, dann sehen Sie, dass Sie 60 00:05:25,480 --> 00:05:30,970 nur den Schatten haben, in dem Sie seinen Versatz definiert haben, sodass Sie sicherstellen können, dass der Schatten 61 00:05:30,970 --> 00:05:37,060 wirklich nur dort ist, wo Sie ihn haben möchten. Wenn Sie jedoch einen Schattenradius festlegen und standardmäßig 62 00:05:37,060 --> 00:05:41,350 auch einen Standardschattenradius verwenden, erhalten Sie diesen Überlaufeffekt, der schließlich ein natürlicherer Schatten 63 00:05:41,350 --> 00:05:47,860 ist. Hier ist es also tatsächlich der gewünschte Effekt. Damit habe ich einen Schatten sowohl auf Android mit 64 00:05:47,920 --> 00:05:53,500 dem Standard-Android-Schatten als auch auf iOS hinzugefügt. Übrigens können Sie unter Android natürlich die 65 00:05:53,500 --> 00:05:59,950 Höhenstufe ändern, um mit verschiedenen Höhenstufen herumzuspielen, bis Sie das gewünschte Aussehen für Ihre Anwendung haben 66 00:05:59,950 --> 00:06:05,530 und im Grunde genug Schatten haben. Abgesehen davon, dass der Schatten hier ist, 67 00:06:05,530 --> 00:06:11,680 denke ich, wäre es schön, jetzt etwas Polsterung in dieser Schachtel zu haben, da die Gegenstände viel zu 68 00:06:11,680 --> 00:06:20,350 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 69 00:06:20,350 --> 00:06:26,440 das ist eine Polsterung von 20 und wieder, das ist ein Wert, mit dem Sie experimentieren können, finden Sie 70 00:06:26,440 --> 00:06:33,910 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. 71 00:06:33,970 --> 00:06:36,700 Außerdem wären abgerundete Ecken eine 72 00:06:37,120 --> 00:06:45,870 schöne Sache, daher füge ich hier einen Randradius von beispielsweise 10 hinzu, um leicht abgerundete Ränder zu haben. 73 00:06:45,870 --> 00:06:52,940 Wenn wir das jetzt speichern, sieht das für mich auf beiden Plattformen und auf beiden Geräten ziemlich süß aus. 74 00:06:52,940 --> 00:06:54,740 Dies ist also jetzt der Eingabecontainer. 75 00:06:54,770 --> 00:06:58,570 Wir können die Eingabe nicht sehen und die Schaltflächen sollten wahrscheinlich auch dieselbe Größe haben, 76 00:06:58,820 --> 00:07:00,950 aber zumindest sieht der Container jetzt gut aus.