Nachdem wir hier an dem Text
gearbeitet haben, können wir zum einen zur App zurückkehren. js und diese vorübergehende Änderung hier loswerden, wo wir
das Spiel
immer über dem Bildschirm anzeigen, wir wollen das nicht mehr tun, stattdessen wollen wir wieder mit dem
normalen Startbildschirm beginnen und zusätzlich zu dieser Änderung jetzt auch ich Ich möchte eine zusätzliche Anpassung vornehmen und das ist diese Schaltfläche zum
Starten des Spiels.
Wir verwenden hier die normale Schaltfläche, was Sie natürlich tun können, aber manchmal möchten Sie auch Ihre
eigene Schaltfläche erstellen, Sie möchten die volle Kontrolle darüber haben, wie Ihre Schaltfläche aussieht, und dafür
können Sie natürlich Ihre eigene erstellen Knopf und genau das werden wir jetzt tun.
Daher füge ich im Komponentenordner meine eigene Schaltfläche hinzu, und Sie können diese beliebig
benennen.
Sie können sie auch benennen, aber das ist
bereits der Name der integrierten Schaltfläche, und obwohl Sie natürlich immer noch Ihren Namen nennen können Um Namenskonflikte oder Verwirrung zu
vermeiden, benenne ich meine Schaltfläche hier als Hauptschaltfläche, da dies meine Hauptschaltfläche ist, meine Hauptschaltfläche, die ich für die großen Aktionen in
diesem Spiel wie das
Starten eines neuen Spiels verwende.
Nun, das ist der Dateiname dort, wir haben natürlich eine reguläre React-Komponente,
deshalb importieren wir React.
Wir importieren hier eine Ansicht, wir werden sicherlich
Text brauchen, wir werden sicherlich ein Stylesheet von React Native wie dieses brauchen
und dann haben wir hier die Hauptschaltflächenkomponente, die Requisiten empfängt und am Ende
etwas jsx zurückgibt. Wir werden unser Styles-Objekt mit Stylesheet haben. erstellen und
wie immer exportieren wir unsere Hauptschaltfläche.
Und jetzt ist die Frage, wie Sie Ihren eigenen Knopf bauen?
Das klingt jetzt vielleicht sehr komplex, ist es aber nicht. Ihre eigene Schaltfläche ist auch nur eine
Kombination aus Ansicht und Text und sehr wichtig, auch eine berührbare Komponente, wie berührbares Highlight oder berührbare Deckkraft oder
berührbares natives Feedback oder sogar ohne Feedback berührbar, wenn Sie
kein visuelles Feedback geben möchten. Also hier gehe ich mit berührbarer Deckkraft und
wir brauchen diese, um dem Benutzer Feedback zu geben, dass die Schaltfläche gedrückt wurde, und um ein onPress-Ereignis zu registrieren.
Ansonsten erstellen wir unsere Schaltfläche einfach mit einer Ansicht, die wir gestaltet haben in gewisser Weise
und ein Text drin.
Jetzt können wir hier in der Hauptschaltfläche unsere berührbare Deckkraft zurückgeben und dort eine Ansicht haben, mit der wir die Schaltfläche formatieren können,
und dort möglicherweise einen Text für einen Text, den eine Schaltfläche haben sollte.
Nehmen wir nun an, unsere Schaltfläche sollte so verwendbar sein, dass wir einen Text direkt zwischen
den öffnenden und schließenden Tags
unserer Komponente übergeben. Daher können wir hier Requisitenkinder als den Text verwenden,
den ich auf der Schaltfläche anzeigen möchte, und dann hier in dieser Ansicht, I. Wir haben einen Stil für die Schaltfläche "Stile". In diesem inneren Text hier könnten
wir einen Stil für die Schaltfläche "Stile" haben. Diese Namen liegen natürlich bei Ihnen. In Bezug auf die berührbare Deckkraft füge ich den onPress-Listener hinzu
und wir Ich werde dort etwas tun müssen.
Jetzt haben wir das Skelett für unseren Button
und können nun einige Stile hinzufügen.
Jetzt können Sie diesen Button natürlich so stylen, wie Sie möchten. Ich habe hier einen bestimmten Stil
im Sinn, den ich hinzufügen werde,
aber spielen Sie auf jeden Fall damit herum und wenden Sie Ihre eigenen Stile an.
Für die Schaltfläche selbst, bei der es sich um die Ansicht um den Text handelt, möchte ich der Schaltfläche eine bestimmte
Hintergrundfarbe geben, und Sie können natürlich auch sicherstellen, dass dies von außen eingestellt werden
kann. Hier können Sie wirklich kreativ werden. Ich werde hier eine Farbe fest codieren, indem ich natürlich meine Farbkonstante hier verwende. Also werde ich Farben aus
Konstanten / Farben importieren, Farben wie diese und dann hier Farben Primärfarbe verwenden, die Primärfarbe vielleicht so.
Das ist also die Hintergrundfarbe, die diese Schaltfläche haben sollte. Auch hier können Sie mithilfe einer
Requisite, die Sie von außen erhalten, sicherstellen, dass dieser Stil dynamisch eingestellt wird.
Hier werde ich ihn jedoch fest codieren.
Darüber hinaus sollte die Schaltfläche einen gewissen Abstand haben, damit der Text nicht direkt
an den Rändern des Schaltflächencontainers
sitzt, also des Felds um den Text, aber es gibt einen gewissen Abstand, und Sie können den gleichen
Abstand in alle Richtungen verwenden Aber ich möchte eine
Polsterung vertikal von 12 verwenden, also nicht so viel Polsterung oben und unten und eine Polsterung horizontal von sagen
wir 30, also viel mehr Polsterung links und rechts.
Das ist die Schaltfläche, jetzt für den Text der Schaltfläche, dort auch die
Farbe Weiß, die auf unserer Primärfarbe gut aussehen sollte. Sie können auch Schwarz verwenden, da
unsere Primärfarbe tatsächlich eine Farbe ist, in der, wie Sie sehen können, sowohl Weiß als auch Schwarz funktioniert tatsächlich, also
können Sie beides verwenden, aber ich
werde hier Weiß für die Schaltfläche verwenden und eine Schriftfamilie von Open Sans hinzufügen, um diese benutzerdefinierte Schriftart auch dort zu verwenden.
Wie Sie erfahren haben, müssen Sie diese Option aktivieren Jeder Text, es gibt keine Vererbung, es gibt keine globale Schriftart,
die Sie einrichten könnten. Jeder Text, der diese Schriftart verwenden sollte, muss sie erhalten. Ich werde eine Schriftgröße
von beispielsweise 18 hinzufügen, um hier in dieser Schaltfläche einen größeren Text zu erhalten . Wenn nun die Taste gedrückt wird, möchte ich dieses
Presseereignis natürlich normalerweise nicht innerhalb der Taste behandeln, sondern innerhalb der Komponente,
in der wir die Taste verwenden.
Also möchte ich es einfach
weiterleiten und dafür können wir einfach erwarten, eine Funktionsreferenz zu erhalten, eine Event-Handler-Funktion auf der OnPress-Requisite unserer
benutzerdefinierten Schaltfläche, aber Sie können diese Requisite beliebig
benennen, Sie können sie onClick benennen, weil in Am Ende sind Sie es, die
Ihre eigene
Schaltfläche verwenden, und dort müssen Sie nur sicherstellen, dass Sie eine Referenz für die Anpassungsfunktion, einen
Anpassungszeiger für eine Ereignishandlerfunktion an die onPress oder eine beliebige Stütze auf Ihrer eigenen Schaltfläche übergeben.
Dieser Name
liegt also bei Ihnen. Verwenden Sie jetzt
die Hauptschaltfläche und den Startbildschirm. Dort können wir es
einfach importieren, also importieren Sie die Hauptschaltfläche aus Komponenten / Hauptschaltfläche und diese Hauptschaltfläche wird jetzt hier zum Starten eines neuen Spiels
verwendet.
Daher werde ich die Schaltfläche hier durch
die Hauptschaltfläche ersetzen. Beachten Sie jedoch, dass ich auf dieser Schaltfläche den Inhalt und den anzuzeigenden Text so
konfiguriert habe, dass tatsächlich der Inhalt zwischen den öffnenden und schließenden Tags unserer Schaltfläche und damit zurück übertragen wird Auf dem
Startspielbildschirm wird der
Titel hier nicht mehr an eine Titelrequisite weitergegeben, sondern wir haben jetzt ein Öffnungs- und Schließ-Tag
für unseren eigenen Button und fügen dort das Startspiel hinzu.
Jetzt ist onPress immer noch eine Requisite, die wir hier lassen, weil ich in der Hauptschaltfläche das onPress-Ereignis
sozusagen an die Funktion weitergebe, die ich hier auf meiner eigenen onPress-Requisite erhalte.
Deshalb müssen wir die onPress-Requisite auf unsere eigene Schaltfläche setzen und daher Damit sollten wir hier einen schönen Hauptknopf
haben, einen schönen Knopf, wenn wir ein neues Spiel starten.
Probieren wir es hier aus,
so sieht es aus und das sieht meiner Meinung nach ganz gut aus, ein schöner Knopf.
Ich bin jedoch
noch nicht fertig, ich möchte abgerundete Ecken auf dieser Schaltfläche haben,
und dafür können wir in der Hauptschaltflächendatei natürlich einfach zu dieser Schaltflächeneigenschaft hier im Stylesheet
gehen, die das Stilobjekt ist, das auf unsere angewendet wird Ansicht und dort können wir einen Randradius von 25 hinzufügen. Wenn wir
das tun, werden Sie sehen, dass wenn ich jetzt diese Schaltfläche bekomme, sie jetzt hier so schön aussieht.
Sie können es auch auf Android anzeigen, haben jetzt abgerundete Ecken und diesen schönen Deckkrafteffekt, wenn Sie darauf tippen.
Übrigens
können Sie diesen Deckkrafteffekt, wie bereits erwähnt, ändern, indem Sie zur berührbaren Deckkraftkomponente gehen, und dort
können Sie Stellen Sie die aktive Deckkraft auf die Deckkraft ein, die Sie beim Drücken haben möchten. Wenn Sie beispielsweise
hier einen ziemlich
hohen Wert verwenden, ist dieser Effekt weniger stark. Jetzt ist er nur geringfügig transparent,
wenn wir darauf tippen, und nicht so transparent wie Vor. Aber es liegt ganz bei Ihnen, was Sie
hier wollen,
ich werde es versuchen. 6 hier, um einen etwas stärkeren
Effekt zu erzielen, aber auch dies können Sie konfigurieren. Im Allgemeinen würde ich vorschlagen, dass Sie damit herumspielen und sehen, wie
Sie diese Schaltfläche formatieren und wie Sie sie wirklich an Ihre Anforderungen anpassen können. Nachdem die benutzerdefinierte Schaltfläche hinzugefügt wurde, möchte
ich sie auch auf
dem Spiel-Over-Bildschirm
verwenden. Dort importiere ich auch die Hauptschaltfläche aus Komponenten / Hauptschaltfläche wie diese und füge diese
Hauptschaltfläche hier einfach hinzu, wenn wir unsere neue Spielschaltfläche anzeigen dort unten.
Verwenden Sie stattdessen die Hauptschaltfläche. Entfernen Sie daher die Titel-Requisite, da wir
den Titel nicht auf unserer
eigenen benutzerdefinierten Schaltfläche festlegen. Stattdessen müssen wir ihn hier zwischen den öffnenden und schließenden Tags unserer benutzerdefinierten Komponenten-Tags übergeben.
Daher sollte dies jetzt hier auch besser aussehen, wenn wir hier schnell ein Spiel beenden und versuchen, den Computer 33 erraten zu lassen.
Hier sind wir und
jetzt sehen wir auch hier den netten Knopf.
Wir sehen hier auch die richtige Ausgabe in Bezug auf die Anzahl
der Runden
und die Anzahl, die wir erraten mussten, und wir können danach ein neues Spiel starten und
das auch noch einmal ganz schnell durchgehen, ja, das sieht alles sehr gut aus.
Das verbleibende, was ich jetzt noch tun möchte, ist, an diesen beiden Schaltflächen zu arbeiten, niedriger und größer.
Sie sehen ein bisschen langweilig
aus, würde ich sagen, wir können sie sicherlich aufregender aussehen lassen. Eine Möglichkeit, sie ein bisschen aufregender aussehen zu lassen, besteht darin,
dass wir dort auch unseren benutzerdefinierten Button verwenden.
Natürlich können wir hier auf dem Spielbildschirm auch die Hauptschaltfläche aus Komponenten / Hauptschaltfläche importieren, also unsere eigene benutzerdefinierte
Schaltfläche, und diese anstelle der derzeit verwendeten Schaltfläche verwenden, die eine integrierte
Schaltfläche ist. Verwenden Sie
hier also unseren eigenen Button. Verschieben Sie daher natürlich den Titel zwischen den
öffnenden und schließenden Tags. Hier ist er also niedriger und hier für den zweiten Button größer.
Dies sollte jetzt ein bisschen besser aussehen, wenn wir hier ein neues Spiel starten .
Jetzt verwenden wir hier unsere benutzerdefinierten Schaltflächen, obwohl wir jetzt auch ein Problem
sehen, es sind einfach ein bisschen zu groß, es sind zu nahe beieinander,
wir können dies jedoch ändern, indem wir zum Schaltflächencontainer gehen und dies ein wenig geben mehr Breite, vielleicht
stellen Sie die maximale Breite hier tatsächlich auf 90% ein.
Wenn wir dies jetzt noch einmal versuchen, ja, das sieht ein bisschen besser aus, es gibt zumindest einen gewissen Abstand
zwischen den Schaltflächen, und dies reicht vorerst aus, da wir derzeit nicht für alle Bildschirmgrößen optimieren.
Erhöhen wir diese Breite hier auch auf 400, damit wir genug Breite haben. Wir verwenden
tatsächlich 400 Pixel und jetzt sieht dies hier auf iOS und auch auf
Android gut aus. Nun, das sieht ein bisschen
besser aus, wie ich bereits erwähnt habe, aber wäre es nicht auch schön, wenn wir Symbole anstelle von Text hätten, da Text natürlich funktioniert, aber ein Symbol
könnte auch den Trick machen und wir haben
seitdem keine Symbole mehr verwendet Sie werden jedoch häufig in mobilen Apps benötigt. Es ist definitiv etwas, das Sie auch beachten sollten. Sie
sollten sich darüber im Klaren sein, wie Sie mit Symbolen arbeiten, wie Sie Symbole in Ihre App einfügen, und deshalb
werden wir dies als Nächstes tun.