1 00:00:02,350 --> 00:00:09,690 Beginnen wir also hier mit unserer Anwendung, und es gibt natürlich verschiedene Möglichkeiten, um loszulegen. 2 00:00:09,700 --> 00:00:10,520 Ich 3 00:00:10,690 --> 00:00:19,420 möchte zunächst diesen Container-Stil hier in meinem Startbildschirm ablegen und stattdessen den loswerden Text und alles hier 4 00:00:19,960 --> 00:00:25,060 und ich möchte zunächst meinen eigenen Header hinzufügen, also diese 5 00:00:25,060 --> 00:00:27,790 Leiste oben auf dem Bildschirm. 6 00:00:28,150 --> 00:00:34,360 Jetzt können wir hier eine solche Leiste selbst erstellen. Lassen Sie mich den Import loswerden, den 7 00:00:34,360 --> 00:00:39,880 wir nicht benötigen, und ich werde ihn nicht innerhalb dieser App-Komponente, sondern in einer 8 00:00:39,880 --> 00:00:46,630 separaten Komponentendatei erstellen, in einer separaten benutzerdefinierten Komponente, weil und Dies ist bereits eine sehr wichtige Sache, die 9 00:00:46,630 --> 00:00:47,630 Sie wegnehmen 10 00:00:47,680 --> 00:00:55,360 müssen. Genau wie bei React for Web Apps empfiehlt es sich, Ihre App in mehrere Komponenten aufzuteilen, die Sie dann 11 00:00:55,360 --> 00:00:59,540 zusammensetzen, da dies zu einem besser verwaltbaren und wiederverwendbaren Code führt. 12 00:00:59,540 --> 00:01:04,660 Also werde ich einen neuen Ordner hinzufügen, Komponenten, der Name liegt jedoch bei Ihnen. Sie können diesen Ordner beliebig 13 00:01:04,910 --> 00:01:09,360 benennen und dort möchte ich einen Header haben. js-Datei für die Header-Komponente. 14 00:01:09,490 --> 00:01:14,490 Dort müssen wir React von React importieren, damit wir dort React verwenden 15 00:01:14,500 --> 00:01:23,300 und jsx-Code schreiben können. Dann benötigen wir auch einige Komponenten von React Native, da Sie nie vergessen dürfen, dass dies die 16 00:01:23,300 --> 00:01:27,650 einzigen Kernkomponenten sind, die Sie in der verwenden können Ende. 17 00:01:27,650 --> 00:01:31,310 Sie können keine Web-HTML-Elemente oder ähnliches verwenden. Sie benötigen 18 00:01:31,310 --> 00:01:34,720 diese Kernprimitive, die React Native Ihnen bietet. 19 00:01:34,850 --> 00:01:40,290 Wir brauchen also definitiv eine Ansicht hier und auch eine Textkomponente und auch eine Stylesheet-Komponente, und jetzt 20 00:01:40,520 --> 00:01:43,420 können wir damit beginnen, unseren Header zu erstellen. 21 00:01:43,550 --> 00:01:51,890 Deshalb füge ich eine Header-Konstante hinzu, die meine Funktionskomponente enthält, da ich nur in diesem Kurs mit Funktionskomponenten arbeite. 22 00:01:51,890 --> 00:01:58,560 Wir werden Hooks an Stellen verwenden, an denen wir Status- oder Nebenwirkungen verwalten müssen, und 23 00:01:58,620 --> 00:02:06,170 hier werden wir Natürlich exportieren Sie diese Komponente am Ende und richten Sie auch ein Styles-Objekt mit Stylesheet 24 00:02:06,170 --> 00:02:10,460 create ein, damit wir dies am Ende stylen können. 25 00:02:10,520 --> 00:02:13,020 Lassen Sie uns jetzt unsere Komponente hier erstellen, lassen 26 00:02:13,040 --> 00:02:14,580 Sie uns hier etwas zurückgeben und 27 00:02:14,750 --> 00:02:19,120 was ich zurückgeben möchte, ist am Ende eine Ansicht mit dem Text darin und der Text sollte 28 00:02:19,120 --> 00:02:20,190 unser Titel sein. 29 00:02:20,300 --> 00:02:26,780 Daher werde ich zwischen dem öffnenden und dem schließenden Tag hier den Titel der Requisiten ausgeben, damit unsere 30 00:02:26,780 --> 00:02:34,010 eigene Komponente die Titel-Requisite empfangen und diese hier ausgeben kann. Und die Ansicht, die den Text umgibt, wird verwendet, um 31 00:02:34,010 --> 00:02:40,790 den Text zu positionieren und ihm etwas Stil zu geben. Um also unseren Header zu gestalten, da Textelemente für 32 00:02:40,880 --> 00:02:47,960 sich genommen ebenfalls stilisierbar sind, aber nicht in dem Maße wie Ansichten, sind Ansichten wirklich ein bisschen mehr Flexibel in 33 00:02:47,960 --> 00:02:53,090 Bezug auf die Stile, die Sie zuweisen können, und in Bezug auf deren Verhalten. Daher 34 00:02:53,120 --> 00:02:59,600 möchten Sie immer eine Ansicht für einen solchen umgebenden Container und für dieses allgemeine Design verwenden, das Ihre 35 00:02:59,600 --> 00:03:02,380 Komponente oder Teile Ihrer Komponente möglicherweise haben. 36 00:03:02,390 --> 00:03:08,810 Also werde ich hier die Stil-Requisite hinzufügen und einen Stil für mein Stil-Objekt zuweisen, einen Stil, den wir dort noch nicht 37 00:03:08,810 --> 00:03:16,810 erstellt haben, aber ich werde ihn als Header bezeichnen und dem Text trotzdem eine Stil-Requisite geben und auf zeigen Styles-Header-Titel oder wie auch immer Sie ihn 38 00:03:16,820 --> 00:03:21,500 benennen möchten, da Sie, wie gesagt, auch Text formatieren können. Hier möchte ich später einige 39 00:03:21,500 --> 00:03:28,360 textspezifische Stile haben, um sicherzustellen, dass der Text gut aussieht. Jetzt hier im Stylesheet können wir mit dem Styling 40 00:03:28,450 --> 00:03:35,170 unseres Headers beginnen und ich beginne mit dem Header selbst, indem ich eine Header-Requisite hinzufüge. Dann enthält dieses 41 00:03:35,170 --> 00:03:40,810 Objekt diese Stildefinitionen für den Header, also für diese Ansichtskomponente hier und da von Natürlich 42 00:03:40,810 --> 00:03:46,960 können Sie mit allem experimentieren, was Sie wollen. Ich werde mit einer Breite von 100% gehen, 43 00:03:47,080 --> 00:03:53,470 damit die volle Gerätebreite, die wir erhalten können, oder die volle Breite der übergeordneten Komponente, um genau zu sein, benötigt 44 00:03:53,470 --> 00:03:58,810 wird, aber ich werde sie so hinzufügen, dass die übergeordnete Komponente die volle Gerätebreite und damit 45 00:03:58,840 --> 00:04:05,040 nimmt Dies nimmt am Ende auch die gesamte Gerätebreite ein. Weisen Sie eine Höhe zu und dort können Sie 46 00:04:05,040 --> 00:04:10,020 mit verschiedenen Werten experimentieren. Ich fand 90 ziemlich anständig und deshalb werde ich damit weitermachen. 47 00:04:10,020 --> 00:04:16,500 Nebenbei bemerkt, im Moment werde ich für diese Bildschirme, die ich hier habe, optimieren. Im nächsten Kursmodul 48 00:04:16,500 --> 00:04:23,610 werden wir untersuchen, wie Sie Ihre Ansichten und Ihren Code für verschiedene Geräte anpassen können, sowohl hinsichtlich ihrer Größe 49 00:04:23,610 --> 00:04:30,690 als auch hinsichtlich der Plattform Ihr Code läuft weiter. Im Moment werden wir dort keine Differenzierung haben, wir werden 50 00:04:30,690 --> 00:04:37,640 auch in unserer App anpassen, um auf diesen beiden Emulatoren gut auszusehen, aber ich werde dies später noch einmal aufgreifen. 51 00:04:37,830 --> 00:04:45,900 Also Höhe von 90, eine Polsterung bis zur Oberseite von 36, um einen gewissen Abstand zur Oberseite zu 52 00:04:45,900 --> 00:04:53,130 haben, und ich muss dies hinzufügen, um im Grunde genommen zurechtzukommen, oder Dinge wie die Statusleiste 53 00:04:53,160 --> 00:05:00,200 hier oder diese Kerbe hier, also füge ich diese Polsterung oben hinzu und ich möchte auch 54 00:05:00,360 --> 00:05:04,760 Um hier und jetzt eine Hintergrundfarbe hinzuzufügen, können Sie 55 00:05:04,770 --> 00:05:13,350 natürlich jede gewünschte Farbe auswählen. Ich habe eine schöne Farbe vorbereitet, einen Hex-Code einer Farbe, die ich persönlich mag, und 56 00:05:13,380 --> 00:05:21,450 das ist # f7287b, was eine ziemlich schöne Farbe in meiner ist Meinung, wie Sie gleich sehen werden. 57 00:05:21,460 --> 00:05:27,250 Jetzt möchte ich auch den Titel zentrieren und verwende daher "Elemente ausrichten" und "Rechtfertigung", da 58 00:05:27,340 --> 00:05:33,280 jede Ansicht standardmäßig die Flexbox verwendet. Daher können wir mit "Elemente ausrichten" und "Rechtfertigung" steuern, wie 59 00:05:33,280 --> 00:05:39,610 die untergeordneten Elemente der Ansicht innerhalb der Ansicht positioniert werden Wenn die Mitte zum Ausrichten von Elementen 60 00:05:39,640 --> 00:05:40,780 und die 61 00:05:40,780 --> 00:05:48,010 Option "Rechtfertigung" ebenfalls auf "Mitte" eingestellt sind, zentrieren wir alle untergeordneten Elemente oder untergeordneten Elemente innerhalb der Ansicht in 62 00:05:48,010 --> 00:05:50,680 der Mitte sowohl horizontal als auch vertikal. 63 00:05:50,680 --> 00:05:52,480 Nun zum Header-Titel 64 00:05:52,480 --> 00:05:55,640 möchte ich auch einige Stile dafür einrichten. 65 00:05:55,780 --> 00:06:05,230 Also der Header-Titel hier, der eine Farbe von Schwarz bekommen sollte, weil das hier zu dieser Farbe passt und damit wir den Text 66 00:06:05,260 --> 00:06:11,020 lesen können und ich die Schriftgröße auf 18 setzen möchte, sagen wir mal, damit 67 00:06:11,050 --> 00:06:18,500 wir dies ein bisschen behoben haben größere Schriftgröße hier. Versuchen wir es mit diesem Header und verwenden 68 00:06:18,620 --> 00:06:26,550 wir ihn in der App. js Datei hier. Dort haben wir diese 69 00:06:26,560 --> 00:06:31,070 Ansicht und dieser Ansicht ist kein Stil zugeordnet. 70 00:06:31,150 --> 00:06:38,050 Ich werde dies ändern und hier eine Bildschirmansicht einrichten und diesem einen Flex eines Attributs geben. 71 00:06:38,050 --> 00:06:44,090 Jetzt können wir dies hier zuweisen und Flex One stellt sicher, dass diese Ansicht den gesamten verfügbaren Platz 72 00:06:44,140 --> 00:06:49,780 einnimmt. Da es sich um die Stammansicht unserer Anwendung handelt, bedeutet dies, dass sie die gesamte 73 00:06:49,780 --> 00:06:56,770 Breite und Höhe einnimmt, die sie erhalten kann, und die volle Kapazität einnimmt Da meine Kopfzeile 100% breit ist und ich 74 00:06:56,770 --> 00:07:03,730 sie direkt in dieser Ansicht hinzufüge, die jetzt so konfiguriert ist, dass sie die volle Breite und Höhe annimmt, nimmt 75 00:07:03,730 --> 00:07:06,360 diese Kopfzeile auch die volle Breite an. 76 00:07:06,370 --> 00:07:08,440 Jetzt müssen wir hier natürlich nur noch den Header 77 00:07:08,440 --> 00:07:12,480 hinzufügen, also importieren Sie den Header von. / components / header, 78 00:07:12,580 --> 00:07:20,020 Sie können die Dateierweiterung weglassen und dann einfach den Header als selbstschließendes Tag hier hinzufügen. Vergessen Sie jedoch nicht, 79 00:07:20,020 --> 00:07:25,120 eine Titel-Requisite festzulegen, da wir die Titel-Requisite hier zwischen den Text-Tags ausgeben Ich 80 00:07:25,570 --> 00:07:33,120 kann hier einen Titel hinzufügen und ich werde ihn als Zahl bezeichnen, denn darum geht es in unserem Spiel. 81 00:07:33,120 --> 00:07:39,210 Wenn wir dies speichern, sollte es automatisch neu erstellt werden und Sie sollten einen Header sehen, der auf dem iPhone und hier auf Android so 82 00:07:39,240 --> 00:07:45,900 aussieht, und ich würde sagen, dass dies für beide Geräte in Ordnung ist. Wir werden später noch einmal untersuchen, wie 83 00:07:46,290 --> 00:07:52,320 Sie das Aussehen auf das Gerät abstimmen können, auf dem Ihre App ausgeführt wird.