Beginnen wir also hier mit unserer Anwendung, und es gibt natürlich verschiedene Möglichkeiten, um loszulegen.
Ich
möchte zunächst diesen Container-Stil hier in meinem Startbildschirm ablegen und stattdessen den loswerden Text und alles hier
und ich möchte zunächst meinen eigenen Header hinzufügen, also diese
Leiste oben auf dem Bildschirm.
Jetzt können wir hier eine solche Leiste selbst erstellen. Lassen Sie mich den Import loswerden, den
wir nicht benötigen, und ich werde ihn nicht innerhalb dieser App-Komponente, sondern in einer
separaten Komponentendatei erstellen, in einer separaten benutzerdefinierten Komponente, weil und Dies ist bereits eine sehr wichtige Sache, die
Sie wegnehmen
müssen. Genau wie bei React for Web Apps empfiehlt es sich, Ihre App in mehrere Komponenten aufzuteilen, die Sie dann
zusammensetzen, da dies zu einem besser verwaltbaren und wiederverwendbaren Code führt.
Also werde ich einen neuen Ordner hinzufügen, Komponenten, der Name liegt jedoch bei Ihnen. Sie können diesen Ordner beliebig
benennen und dort möchte ich einen Header haben. js-Datei für die Header-Komponente.
Dort müssen wir React von React importieren, damit wir dort React verwenden
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
einzigen Kernkomponenten sind, die Sie in der verwenden können Ende.
Sie können keine Web-HTML-Elemente oder ähnliches verwenden. Sie benötigen
diese Kernprimitive, die React Native Ihnen bietet.
Wir brauchen also definitiv eine Ansicht hier und auch eine Textkomponente und auch eine Stylesheet-Komponente, und jetzt
können wir damit beginnen, unseren Header zu erstellen.
Deshalb füge ich eine Header-Konstante hinzu, die meine Funktionskomponente enthält, da ich nur in diesem Kurs mit Funktionskomponenten arbeite.
Wir werden Hooks an Stellen verwenden, an denen wir Status- oder Nebenwirkungen verwalten müssen, und
hier werden wir Natürlich exportieren Sie diese Komponente am Ende und richten Sie auch ein Styles-Objekt mit Stylesheet
create ein, damit wir dies am Ende stylen können.
Lassen Sie uns jetzt unsere Komponente hier erstellen, lassen
Sie uns hier etwas zurückgeben und
was ich zurückgeben möchte, ist am Ende eine Ansicht mit dem Text darin und der Text sollte
unser Titel sein.
Daher werde ich zwischen dem öffnenden und dem schließenden Tag hier den Titel der Requisiten ausgeben, damit unsere
eigene Komponente die Titel-Requisite empfangen und diese hier ausgeben kann. Und die Ansicht, die den Text umgibt, wird verwendet, um
den Text zu positionieren und ihm etwas Stil zu geben. Um also unseren Header zu gestalten, da Textelemente für
sich genommen ebenfalls stilisierbar sind, aber nicht in dem Maße wie Ansichten, sind Ansichten wirklich ein bisschen mehr Flexibel in
Bezug auf die Stile, die Sie zuweisen können, und in Bezug auf deren Verhalten. Daher
möchten Sie immer eine Ansicht für einen solchen umgebenden Container und für dieses allgemeine Design verwenden, das Ihre
Komponente oder Teile Ihrer Komponente möglicherweise haben.
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
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
benennen möchten, da Sie, wie gesagt, auch Text formatieren können. Hier möchte ich später einige
textspezifische Stile haben, um sicherzustellen, dass der Text gut aussieht. Jetzt hier im Stylesheet können wir mit dem Styling
unseres Headers beginnen und ich beginne mit dem Header selbst, indem ich eine Header-Requisite hinzufüge. Dann enthält dieses
Objekt diese Stildefinitionen für den Header, also für diese Ansichtskomponente hier und da von Natürlich
können Sie mit allem experimentieren, was Sie wollen. Ich werde mit einer Breite von 100% gehen,
damit die volle Gerätebreite, die wir erhalten können, oder die volle Breite der übergeordneten Komponente, um genau zu sein, benötigt
wird, aber ich werde sie so hinzufügen, dass die übergeordnete Komponente die volle Gerätebreite und damit
nimmt Dies nimmt am Ende auch die gesamte Gerätebreite ein. Weisen Sie eine Höhe zu und dort können Sie
mit verschiedenen Werten experimentieren. Ich fand 90 ziemlich anständig und deshalb werde ich damit weitermachen.
Nebenbei bemerkt, im Moment werde ich für diese Bildschirme, die ich hier habe, optimieren. Im nächsten Kursmodul
werden wir untersuchen, wie Sie Ihre Ansichten und Ihren Code für verschiedene Geräte anpassen können, sowohl hinsichtlich ihrer Größe
als auch hinsichtlich der Plattform Ihr Code läuft weiter. Im Moment werden wir dort keine Differenzierung haben, wir werden
auch in unserer App anpassen, um auf diesen beiden Emulatoren gut auszusehen, aber ich werde dies später noch einmal aufgreifen.
Also Höhe von 90, eine Polsterung bis zur Oberseite von 36, um einen gewissen Abstand zur Oberseite zu
haben, und ich muss dies hinzufügen, um im Grunde genommen zurechtzukommen, oder Dinge wie die Statusleiste
hier oder diese Kerbe hier, also füge ich diese Polsterung oben hinzu und ich möchte auch
Um hier und jetzt eine Hintergrundfarbe hinzuzufügen, können Sie
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
das ist # f7287b, was eine ziemlich schöne Farbe in meiner ist Meinung, wie Sie gleich sehen werden.
Jetzt möchte ich auch den Titel zentrieren und verwende daher "Elemente ausrichten" und "Rechtfertigung", da
jede Ansicht standardmäßig die Flexbox verwendet. Daher können wir mit "Elemente ausrichten" und "Rechtfertigung" steuern, wie
die untergeordneten Elemente der Ansicht innerhalb der Ansicht positioniert werden Wenn die Mitte zum Ausrichten von Elementen
und die
Option "Rechtfertigung" ebenfalls auf "Mitte" eingestellt sind, zentrieren wir alle untergeordneten Elemente oder untergeordneten Elemente innerhalb der Ansicht in
der Mitte sowohl horizontal als auch vertikal.
Nun zum Header-Titel
möchte ich auch einige Stile dafür einrichten.
Also der Header-Titel hier, der eine Farbe von Schwarz bekommen sollte, weil das hier zu dieser Farbe passt und damit wir den Text
lesen können und ich die Schriftgröße auf 18 setzen möchte, sagen wir mal, damit
wir dies ein bisschen behoben haben größere Schriftgröße hier. Versuchen wir es mit diesem Header und verwenden
wir ihn in der App. js Datei hier. Dort haben wir diese
Ansicht und dieser Ansicht ist kein Stil zugeordnet.
Ich werde dies ändern und hier eine Bildschirmansicht einrichten und diesem einen Flex eines Attributs geben.
Jetzt können wir dies hier zuweisen und Flex One stellt sicher, dass diese Ansicht den gesamten verfügbaren Platz
einnimmt. Da es sich um die Stammansicht unserer Anwendung handelt, bedeutet dies, dass sie die gesamte
Breite und Höhe einnimmt, die sie erhalten kann, und die volle Kapazität einnimmt Da meine Kopfzeile 100% breit ist und ich
sie direkt in dieser Ansicht hinzufüge, die jetzt so konfiguriert ist, dass sie die volle Breite und Höhe annimmt, nimmt
diese Kopfzeile auch die volle Breite an.
Jetzt müssen wir hier natürlich nur noch den Header
hinzufügen, also importieren Sie den Header von. / components / header,
Sie können die Dateierweiterung weglassen und dann einfach den Header als selbstschließendes Tag hier hinzufügen. Vergessen Sie jedoch nicht,
eine Titel-Requisite festzulegen, da wir die Titel-Requisite hier zwischen den Text-Tags ausgeben Ich
kann hier einen Titel hinzufügen und ich werde ihn als Zahl bezeichnen, denn darum geht es in unserem Spiel.
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
aussieht, und ich würde sagen, dass dies für beide Geräte in Ordnung ist. Wir werden später noch einmal untersuchen, wie
Sie das Aussehen auf das Gerät abstimmen können, auf dem Ihre App ausgeführt wird.