1 00:00:02,410 --> 00:00:07,890 Zurück im Code haben wir damit begonnen, einige Ansichten hier einzufügen, und natürlich funktioniert dies jetzt nicht, dies wird nur 2 00:00:07,900 --> 00:00:13,930 kaputt gehen oder es wird nichts Sinnvolles für den Bildschirm darstellen. In dieser ersten verschachtelten Ansicht hier, in 3 00:00:13,930 --> 00:00:14,920 diesem Block, 4 00:00:14,920 --> 00:00:21,330 habe ich eine Texteingabe und eine Schaltfläche erhalten. Bequemerweise wird beides von React Native bereitgestellt, wir haben hier 5 00:00:21,330 --> 00:00:27,390 eine Texteingabe und wir haben auch eine Schaltflächenkomponente. Wir können also beide Texteingaben importieren, mit denen der 6 00:00:27,390 --> 00:00:33,510 Benutzer Text und Schaltflächen eingeben kann. In dieser Ansicht, in dieser ersten verschachtelten Ansicht, füge ich eine Texteingabe 7 00:00:33,510 --> 00:00:40,890 als selbstschließendes Tag hinzu, da zwischen dem Öffnen nichts passieren kann und schließende Tags und für die Schaltfläche könnte man denken, dass 8 00:00:40,890 --> 00:00:42,440 Sie eine Schaltfläche wie 9 00:00:42,450 --> 00:00:47,430 diese verwenden, aber tatsächlich funktioniert diese Schaltfläche "Native reagieren" nicht so, sondern es handelt 10 00:00:47,430 --> 00:00:47,960 sich 11 00:00:47,970 --> 00:00:53,620 um eine selbstschließende Schaltfläche, und Sie legen eine Titeleigenschaft fest, um zu definieren, welcher Text dort 12 00:00:53,840 --> 00:01:00,150 und gerendert werden soll hier könnten wir hinzufügen hinzufügen. Jetzt haben wir dort eine Texteingabe und eine 13 00:01:00,360 --> 00:01:08,230 Schaltfläche. Wenn wir diese und diese Neuladungen speichern, sehen wir die Schaltfläche hier, aber die Texteingabe sehen wir nicht, oder? 14 00:01:08,490 --> 00:01:11,070 Das funktioniert also nicht wie beabsichtigt. 15 00:01:11,070 --> 00:01:16,850 Der Grund dafür ist, dass die Texteingabe hier unter der Statusleiste ausgeblendet wird. 16 00:01:16,920 --> 00:01:22,740 Jetzt ist also die Zeit gekommen, in der wir mit dem Hinzufügen eines Layouts und einer Struktur 17 00:01:22,770 --> 00:01:25,410 zu dieser Seite beginnen sollten, da 18 00:01:25,410 --> 00:01:30,990 das Hinzufügen von Komponenten allein nicht ausreicht. Bei einer React Native-App geht es darum, Komponenten zu 19 00:01:31,080 --> 00:01:40,190 verwenden und dann das richtige Layout hinzuzufügen, das richtige Struktur zu Ihren Komponenten. Hier wäre es zum Beispiel sinnvoll, eine allgemeine Auffüllung um diese Ansicht hinzuzufügen, also in 20 00:01:40,190 --> 00:01:46,310 dieser Draufsicht, so dass die Auffüllung im Grunde genommen einen gewissen Abstand vom Rand dieser Ansicht hat, der in unserem Fall 21 00:01:46,760 --> 00:01:48,870 hier im Grunde genommen der Geräterahmen ist, 22 00:01:48,920 --> 00:01:54,890 da ich es bin Wenn wir über die oberste Ansicht zum Inhalt der Ansicht sprechen, also einen gewissen Abstand zwischen 23 00:01:54,980 --> 00:02:00,650 den Rändern der obersten Ansicht dieser umgebenden Ansicht und dem Inhalt in der Ansicht. Dazu können wir hier in 24 00:02:00,650 --> 00:02:02,660 der Ansicht die Stileigenschaft hinzufügen. 25 00:02:02,660 --> 00:02:09,530 Die meisten Komponenten in React Native unterstützen die Stileigenschaft, die Ansicht tut dies, und dort verwenden Sie diese 26 00:02:10,070 --> 00:02:15,800 dynamische Inhaltsbindung, die Sie auch aus dem normalen React kennen, mit den einzelnen geschweiften Klammern, 27 00:02:15,800 --> 00:02:21,590 und der Stil erwartet jetzt ein Javascript-Objekt. Daher fügen wir hier ein weiteres Paar geschweifter Klammern hinzu. 28 00:02:21,590 --> 00:02:25,530 Ein häufiger Fehler besteht darin, dass Sie glauben, dass dies eine spezielle Syntax ist, 29 00:02:25,670 --> 00:02:31,390 die doppelte geschweifte Klammern erfordert. In der Tat handelt es sich um die normale React-Syntax mit ähnlich geschweiften Klammern, bei der 30 00:02:31,400 --> 00:02:34,640 dann der dynamische Wert an den Stil übergeben wird ist zufällig ein 31 00:02:34,640 --> 00:02:40,310 Javascript-Objekt, daher haben wir ein weiteres Paar geschweifter Klammern. In diesem Objekt können Sie 32 00:02:40,310 --> 00:02:46,610 jetzt Schlüssel-Wert-Paare haben, bei denen die Schlüssel Ihre Stileigenschaftsnamen und die Werte die Werte für 33 00:02:47,420 --> 00:02:51,740 diese Stileigenschaften sind und diese Stileigenschaftsnamen von CSS beeinflusst werden. 34 00:02:51,770 --> 00:02:58,250 Hier können Sie also Auffüllungen hinzufügen, die auch in React Native vorhanden sind. Eine umfassende Liste der 35 00:02:58,250 --> 00:03:04,130 unterstützten Stileigenschaften finden Sie immer, indem Sie zu der von Ihnen verwendeten Komponente wechseln, z. 36 00:03:04,130 --> 00:03:10,850 B. in der Ansicht hier, und dann auf klicken Wenn Sie in der Stileigenschaft und hier auf Ansichtsstile 37 00:03:10,850 --> 00:03:17,750 klicken, wird eine Liste aller bereitgestellten Eigenschaften angezeigt, die Sie verwenden können, und hier werden einige spezielle Eigenschaften für 38 00:03:17,750 --> 00:03:24,410 die Ansicht sowie einige allgemeine Requisiten wie Layout-Requisiten und dort angezeigt. Sie würden zum Beispiel die Polsterung finden. 39 00:03:24,480 --> 00:03:30,640 So können Sie herausfinden, was unterstützt wird, aber Sie werden auch viele Beispiele in diesem Kurs sehen. 40 00:03:30,650 --> 00:03:36,080 Also füge ich hier eine Auffüllung hinzu und der Wert kann jetzt nur eine Zahl sein, die 41 00:03:36,290 --> 00:03:41,300 geräteunabhängige Pixel sind, also ein Pixelwert, der immer gut aussieht, egal welche Gerätegröße Sie haben. 42 00:03:41,330 --> 00:03:46,990 Hier könnten wir also 10 hinzufügen, und wenn wir das tun, sehen wir jetzt, dass die Schaltfläche etwas 43 00:03:47,050 --> 00:03:51,860 weiter unten ist. Vielleicht fügen wir hier 30 hinzu, damit wir einen größeren Unterschied sehen 44 00:03:52,090 --> 00:03:56,050 können. Jetzt funktioniert das und wenn Sie über die Schaltfläche tippen. Sie 45 00:03:56,050 --> 00:04:01,230 sehen hier nicht wirklich eine Eingabe, aber Sie sehen, dass meine Softtastatur unter Android geöffnet wurde. 46 00:04:01,240 --> 00:04:03,790 Unter iOS wird sie nicht standardmäßig geöffnet. Dort 47 00:04:03,970 --> 00:04:11,410 können Sie auch hier tippen und wenn Sie häufig genug tippen oder wenn Sie zu gehen Hardware, diese Tastatur schaltet Software-Tastatur um, sie sollte 48 00:04:11,410 --> 00:04:13,780 sich auch dort öffnen, also haben wir 49 00:04:13,780 --> 00:04:15,180 hier auch eine Eingabe. 50 00:04:15,190 --> 00:04:19,840 Jetzt können wir diese Eingabe sehen, da sie jetzt nicht mehr hinter dieser Statusleiste steht. 51 00:04:19,840 --> 00:04:27,040 Das Hinzufügen dieser Polsterung hat wahrscheinlich Sinn gemacht, da wir jetzt sichergestellt haben, dass sich unser Layout hier 52 00:04:27,040 --> 00:04:28,660 innerhalb unseres Bildschirms befindet. 53 00:04:28,660 --> 00:04:31,980 Jetzt gibt es noch andere Tools, mit denen Sie sicherstellen können, dass auch hier genügend 54 00:04:32,170 --> 00:04:36,460 Polster vorhanden sind. Stellen Sie die Polsterung jedoch zunächst manuell ein und setzen Sie sie möglicherweise auf den Wert 30. 55 00:04:36,880 --> 00:04:39,760 Wir haben also mit dem Layout begonnen. Gehen wir 56 00:04:39,760 --> 00:04:43,650 nun zu dieser Komponente zurück und stellen sicher, dass wir etwas sehen können. 57 00:04:43,660 --> 00:04:48,120 Wir können sehen, dass es eine Texteingabe gibt und wir müssen es nicht nur erraten. 58 00:04:48,550 --> 00:04:54,070 Dazu können wir zur Texteingabe gehen und dort zum Beispiel die Platzhalter-Requisite hinzufügen. Um herauszufinden, was Sie 59 00:04:54,070 --> 00:04:55,800 einstellen können, können Sie wie 60 00:04:55,810 --> 00:05:02,990 zuvor immer zu den offiziellen Dokumenten gehen, in diesem Fall zu den Texteingabedokumenten und dort. Sie finden eine Beschreibung der Verwendung und einige 61 00:05:03,000 --> 00:05:04,930 Beispiele. Wenn Sie jedoch nach unten 62 00:05:05,070 --> 00:05:10,770 scrollen, finden Sie auch alle Requisiten, die Sie festlegen können, und dort finden Sie beispielsweise heraus, dass Sie 63 00:05:11,130 --> 00:05:16,410 eine Platzhalter-Requisite festlegen können, bei der es sich um den Dummy-Text handelt wird angezeigt, bevor der Benutzer 64 00:05:16,410 --> 00:05:17,640 Text eingegeben hat. 65 00:05:17,640 --> 00:05:23,580 Hier ist also eine Zeichenfolge erforderlich, und hier können wir das Kursziel eingeben, da Sie hier Ihr 66 00:05:23,580 --> 00:05:24,940 Kursziel festlegen können 67 00:05:25,040 --> 00:05:28,970 sollten. Wenn Sie dies tun, sehen Sie sowohl auf Android als auch 68 00:05:28,980 --> 00:05:31,510 auf iOS, dass dieser Kurszieltext vorhanden ist. 69 00:05:31,510 --> 00:05:33,590 Jetzt könnte es noch ein 70 00:05:33,600 --> 00:05:39,180 bisschen besser sein, könnte ein bisschen klarer sein, dass es eine Texteingabe gibt, und deshalb 71 00:05:39,210 --> 00:05:40,170 werde ich 72 00:05:40,170 --> 00:05:48,170 hier einen Stil hinzufügen, einen anderen Inline-Stil und hier werde ich jetzt die Randunterfarbe Schwarz, Schwarz einrichten ist eine Zeichenfolge, solche Farbverknüpfungen 73 00:05:48,180 --> 00:05:53,940 werden in React Native unterstützt, und eine umfassende Liste aller verfügbaren Farben ist dieser Vorlesung hier 74 00:05:54,870 --> 00:06:01,860 beigefügt. Ich kann auch sehen, dass eine Randunterbreite von beispielsweise 1 und dies dazu führt, dass eine Unterseite festgelegt 75 00:06:01,860 --> 00:06:07,770 wird Begrenzen Sie diese Eingabe, damit wir sie jetzt, wenn wir zurückgehen, hier deutlich unter iOS 76 00:06:07,770 --> 00:06:13,710 sehen können. Da auf iOS immer noch nicht so viel Platz vorhanden ist, lassen Sie mich diese 77 00:06:13,710 --> 00:06:17,520 Auffüllung hier auf 50 erhöhen. ja das sieht besser aus 78 00:06:17,540 --> 00:06:22,630 Jetzt haben wir diese Grenze unter unserer Eingabe und das macht deutlich, dass es hier eine Eingabe gibt. 79 00:06:22,810 --> 00:06:26,380 Natürlich können Sie nicht nur einen Rand unten festlegen, sondern 80 00:06:26,380 --> 00:06:28,640 auch einen allgemeinen Rand festlegen, 81 00:06:28,660 --> 00:06:32,140 indem Sie hier unten eine Rahmenfarbe und eine Rahmenbreite weglassen. 82 00:06:32,530 --> 00:06:36,180 Wenn Sie dies tun, wird dieser von einem umgeben Rand. 83 00:06:36,190 --> 00:06:42,250 Nun ein wichtiger Hinweis zu diesen Stilnamen hier, Namen von Stileigenschaften, Sie sehen natürlich, dass 84 00:06:42,250 --> 00:06:49,390 es sich um die Rahmenbreite und die so geschriebene Rahmenfarbe handelt. In normalem CSS hätten Sie eine Rahmenfarbe 85 00:06:49,750 --> 00:06:55,870 gehabt, die die Rahmenfarbe anwenden würde, aber das würde ein ungültiger Eigenschaftsname in Javascript sein, weshalb 86 00:06:55,870 --> 00:06:57,670 dies nicht unterstützt wird. 87 00:06:57,670 --> 00:07:03,280 Tatsächlich wäre ein gültiger Eigenschaftsname in Javascript, wenn Sie dies in Anführungszeichen setzen, aber selbst das 88 00:07:03,520 --> 00:07:10,240 wird in React Native nicht unterstützt, sodass diese alternativen Syntaxen, beispielsweise diese Syntax, in Javascript funktionieren würden, wenn Sie 89 00:07:10,240 --> 00:07:18,010 einen Stil auf ein Web-HTML-Element anwenden Diese Syntaxen werden in React Native jedoch nicht unterstützt. Dort müssen Sie wirklich diese Kamelfallsyntax verwenden, bei 90 00:07:18,010 --> 00:07:23,320 der Sie beispielsweise eine Rahmenfarbe wie diese schreiben, oder kurz gesagt, Sie müssen die 91 00:07:23,320 --> 00:07:29,740 Eigenschaftsnamen verwenden, die Sie auch in den offiziellen Dokumenten finden Es gibt keine alternativen Namen für diese Stileigenschaften, und 92 00:07:29,740 --> 00:07:37,030 wir könnten jetzt hier auch eine Auffüllung von beispielsweise 10 hinzufügen, damit wir einen gewissen Abstand zwischen dem Rand und dem 93 00:07:37,600 --> 00:07:43,570 tatsächlichen Teil haben, an dem wir etwas eingeben, und ich würde sagen, dass dies bereits viel besser 94 00:07:43,720 --> 00:07:49,540 aussieht und wir Ich kann deutlich sehen, dass wir hier eine Eingabe haben, in die Benutzer etwas 95 00:07:49,540 --> 00:07:50,530 eingeben können.