Jetzt haben wir den Kartenlook, jetzt wollen wir als nächstes die Schaltflächen reparieren und das habe ich dir bereits gezeigt,
also definitiv deine Chance, das Video anzuhalten und es selbst zu machen.
Ich möchte sicherstellen, dass die Schaltflächen die gleiche Größe haben. Sie sollten nicht die gesamte verfügbare
Breite einnehmen, aber sie sollten die gleiche Größe haben, um sicherzustellen, dass der Text dort hineinpasst und dass sie gleich
groß sind.
Also deine Chance, das Video anzuhalten, danach machen wir das zusammen. Warst du erfolgreich?
Stellen wir sicher, dass die Schaltflächen dieselbe Größe haben. Dafür haben Sie auf dem Startbildschirm, auf dem ich die Schaltflächen habe,
erfahren, dass die Lösung darin besteht, die Schaltflächen in eine Ansicht zu verpacken. Sie müssen also Ihre eigene Ansichtskomponente um die Schaltflächen hinzufügen,
und jetzt können Sie
diesen Schaltflächen einen Stil zuweisen. Daher können Sie hier beiden Schaltflächen ein Schaltflächenobjekt in meinem Stilobjekt verwenden. Fügen Sie
also hier und dort eine Schaltfläche
hinzu Geben Sie einfach eine Breite und hier ist eine Breite, die ich wählen werde, sagen wir 80.
Mal sehen, wie das aussieht, wenn ich das speichere, ein bisschen zu klein, wie es scheint, da diese Schaltfläche
einen Zeilenumbruch enthält.
Also lass uns mit 120 gehen, jetzt ist das sicherlich zu viel, also wie
wäre es mit 100 und das sieht für mich ziemlich ordentlich aus.
Jetzt zusätzlich und das war keine Aufgabe für einen Benutzer, keine Sorge,
wenn Sie das nicht getan haben, ich möchte ihre Farben ändern und eine der Farben
sollte unsere Hauptfarbe sein und ich möchte auch einen Akzent setzen, einige Sekundärfarben sozusagen, die wir verwenden können.
Dafür gibt es in der Startbildschirm-Bildschirmkomponente auf der Schaltfläche selbst eine Farbrequisite, mit der Sie die Farbe
steuern können. Für Android
ist dies die Hintergrundfarbe, für iOS die Textfarbe und jetzt das Zurücksetzen Schaltfläche, dort möchte ich
eine Farbe von # 717fc einrichten, das ist eine schöne Farbe, denke ich, und
für die Hauptschaltfläche, die Bestätigungstaste,
verwende ich mein Hauptthema und ich möchte die gleiche Farbe verwenden, die ich in der Kopfzeile
verwende .
Dort habe ich diesen Hex-Code als Hintergrundfarbe verwendet. Ich werde hier
jetzt dieselbe Farbe für diese zweite Schaltfläche verwenden. Damit können wir das speichern und jetzt
haben wir diese beiden Tastenfarben hier, was meiner Meinung nach ganz gut aussieht.
Ein Nachteil dieses Ansatzes oder eine Sache, die wir verbessern können, ist, dass ich diesen Hex-Code hier verwende, ihn in
der Kopfzeile verwende und wahrscheinlich später in der App die
gleiche Farbe auch an anderen Stellen verwenden möchten .
Es wäre also schön, wenn wir dies als eine Art Thema einrichten könnten,
das man sagen könnte, dass wir diese Farben leicht verwenden könnten, ohne Hex-Codes über unsere App zu kopieren, und dass wir die Farbe
auch an einer Stelle ändern könnten, wenn wir jemals wollen Verwenden Sie eine andere Farbe, und wir
müssen dies nicht in Dutzenden von Komponenten tun.
Und dafür werde ich einen Ansatz verwenden, bei dem ich einen neuen Ordner auf der Stammebene hinzufüge und ihn
als Konstanten benenne. Wie immer können Sie diese Ordner beliebig benennen
und dort möchte ich Farben haben. js Datei. Auch dieser Name kann
auch beliebig benannt werden, da diese Datei ein Standard-Javascript-Objekt exportiert, ein Javascript-Objekt exportiert und dort beliebige Schlüssel-Wert-Paare haben kann,
die ich möchte, und ich werde sie festlegen eine Primärfarbe, also nur Primärfarbe als Schlüsselname und dies sollte dieser
Hex-Code sein, den ich gerade kopiert habe, also diese Kopfzeilenfarbe auch akzentuiert oder sekundär, was
auch immer Sie es benennen möchten, ich werde mit Akzentfarbe gehen
und das sollte Sei diese andere Farbe, die ich auf der ersten Schaltfläche
verwendet habe, also diesen Hex-Code hier, ich werde das hier verwenden.
Jetzt werden diese Farben hier definiert und wir können sie jetzt einfach aus dieser Datei importieren. Wenn wir sie
hier ändern, ändern sie sich überall in dieser Anwendung und können daher während der Entwicklung problemlos ausgetauscht werden.
Jetzt können wir auf dem Startbildschirm einfach Farben aus Konstanten / Farben wie diesen importieren. Ich habe hier ein großes C angegeben, um
anzuzeigen, dass es sich um eine Sammlung von Werten handelt. Sie können diese beliebig benennen. Sie können auch ein
Kleinbuchstaben c
verwenden, wobei die Benennung keine Rolle spielt. Jetzt können
Sie hier Farben verwenden, um Ihre Farben zuzuweisen.
Für diese Schaltfläche zum Zurücksetzen verwenden wir jetzt einen dynamischen Wert, damit wir die Farben erreichen können. Akzent und hier für den Hauptknopf, für den
Bestätigungsknopf, ich werde mit Farben gehen. primär und das gleiche
in der Kopfzeile. Dort möchten wir jetzt natürlich auch diese Farbe
verwenden und sie hier nicht fest codieren, sondern Farben aus Konstanten / Farben importieren. Mit dieser importierten Farbe können
Sie sie auch in einem Stylesheet verwenden, nicht nur in jsx, sondern überall Immerhin
werde ich in dieser
Datei hier auf Farben verweisen. primär. Und wenn Sie das speichern, sehen
wir wieder genauso aus wie zuvor, aber noch einmal auf eine elegantere Art und Weise. Wenn Sie jemals entscheiden, dass Ihre Akzentfarbe nicht diese Farbe,
sondern blau sein soll, tauschen Sie sie einfach hier aus, Ihre App ist wieder aufgebaut und du hast einen blauen Knopf.
Das ist der große Vorteil der Verwaltung Ihrer Farben oder anderer Kernkonstanten in solchen Dateien. Sie können
beispielsweise eine andere Datei mit dem Namen Text verwenden, in der Sie einige Kernschriftgrößen oder einen anderen Dateibereich haben, in dem Sie
Standardwerte für Ränder oder Auffüllungen speichern Sie müssen nicht immer wieder dieselben Werte manuell verwenden. Dies
sind alles Ansätze,
mit denen Sie Ihr Leben als Entwickler vereinfachen und Code erstellen können, mit
dem Sie bei Bedarf schnell Werte austauschen können.
Im Moment werde ich nur meine Farben dort verwalten, da dies eines der nervigsten Dinge beim Kopieren
ist und es daher ein großartiger Ansatz ist, es in einer solchen Datei zu verwalten.