1 00:00:02,470 --> 00:00:05,140 Nachdem wir hier an dem Text 2 00:00:05,140 --> 00:00:11,250 gearbeitet haben, können wir zum einen zur App zurückkehren. js und diese vorübergehende Änderung hier loswerden, wo wir 3 00:00:11,250 --> 00:00:12,100 das Spiel 4 00:00:12,100 --> 00:00:17,350 immer über dem Bildschirm anzeigen, wir wollen das nicht mehr tun, stattdessen wollen wir wieder mit dem 5 00:00:17,350 --> 00:00:24,790 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 6 00:00:24,790 --> 00:00:25,720 Starten des Spiels. 7 00:00:25,810 --> 00:00:31,000 Wir verwenden hier die normale Schaltfläche, was Sie natürlich tun können, aber manchmal möchten Sie auch Ihre 8 00:00:31,000 --> 00:00:35,910 eigene Schaltfläche erstellen, Sie möchten die volle Kontrolle darüber haben, wie Ihre Schaltfläche aussieht, und dafür 9 00:00:36,130 --> 00:00:40,610 können Sie natürlich Ihre eigene erstellen Knopf und genau das werden wir jetzt tun. 10 00:00:40,950 --> 00:00:45,700 Daher füge ich im Komponentenordner meine eigene Schaltfläche hinzu, und Sie können diese beliebig 11 00:00:45,700 --> 00:00:46,390 benennen. 12 00:00:46,390 --> 00:00:49,400 Sie können sie auch benennen, aber das ist 13 00:00:49,480 --> 00:00:56,740 bereits der Name der integrierten Schaltfläche, und obwohl Sie natürlich immer noch Ihren Namen nennen können Um Namenskonflikte oder Verwirrung zu 14 00:00:56,740 --> 00:01:04,330 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 15 00:01:04,330 --> 00:01:05,710 diesem Spiel wie das 16 00:01:05,710 --> 00:01:07,480 Starten eines neuen Spiels verwende. 17 00:01:07,720 --> 00:01:12,730 Nun, das ist der Dateiname dort, wir haben natürlich eine reguläre React-Komponente, 18 00:01:12,730 --> 00:01:14,470 deshalb importieren wir React. 19 00:01:14,590 --> 00:01:18,160 Wir importieren hier eine Ansicht, wir werden sicherlich 20 00:01:18,160 --> 00:01:23,960 Text brauchen, wir werden sicherlich ein Stylesheet von React Native wie dieses brauchen 21 00:01:24,160 --> 00:01:29,990 und dann haben wir hier die Hauptschaltflächenkomponente, die Requisiten empfängt und am Ende 22 00:01:29,990 --> 00:01:35,290 etwas jsx zurückgibt. Wir werden unser Styles-Objekt mit Stylesheet haben. erstellen und 23 00:01:35,470 --> 00:01:39,310 wie immer exportieren wir unsere Hauptschaltfläche. 24 00:01:39,310 --> 00:01:42,100 Und jetzt ist die Frage, wie Sie Ihren eigenen Knopf bauen? 25 00:01:42,110 --> 00:01:48,640 Das klingt jetzt vielleicht sehr komplex, ist es aber nicht. Ihre eigene Schaltfläche ist auch nur eine 26 00:01:48,640 --> 00:01:56,890 Kombination aus Ansicht und Text und sehr wichtig, auch eine berührbare Komponente, wie berührbares Highlight oder berührbare Deckkraft oder 27 00:01:56,890 --> 00:02:01,300 berührbares natives Feedback oder sogar ohne Feedback berührbar, wenn Sie 28 00:02:01,360 --> 00:02:06,940 kein visuelles Feedback geben möchten. Also hier gehe ich mit berührbarer Deckkraft und 29 00:02:06,940 --> 00:02:13,690 wir brauchen diese, um dem Benutzer Feedback zu geben, dass die Schaltfläche gedrückt wurde, und um ein onPress-Ereignis zu registrieren. 30 00:02:14,320 --> 00:02:19,720 Ansonsten erstellen wir unsere Schaltfläche einfach mit einer Ansicht, die wir gestaltet haben in gewisser Weise 31 00:02:19,720 --> 00:02:21,370 und ein Text drin. 32 00:02:21,370 --> 00:02:29,330 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, 33 00:02:29,330 --> 00:02:34,120 und dort möglicherweise einen Text für einen Text, den eine Schaltfläche haben sollte. 34 00:02:34,240 --> 00:02:39,680 Nehmen wir nun an, unsere Schaltfläche sollte so verwendbar sein, dass wir einen Text direkt zwischen 35 00:02:39,680 --> 00:02:41,600 den öffnenden und schließenden Tags 36 00:02:41,600 --> 00:02:46,030 unserer Komponente übergeben. Daher können wir hier Requisitenkinder als den Text verwenden, 37 00:02:46,300 --> 00:02:55,990 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 38 00:02:55,990 --> 00:03:04,860 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 39 00:03:04,930 --> 00:03:07,920 und wir Ich werde dort etwas tun müssen. 40 00:03:09,000 --> 00:03:11,430 Jetzt haben wir das Skelett für unseren Button 41 00:03:11,450 --> 00:03:13,700 und können nun einige Stile hinzufügen. 42 00:03:13,790 --> 00:03:18,450 Jetzt können Sie diesen Button natürlich so stylen, wie Sie möchten. Ich habe hier einen bestimmten Stil 43 00:03:18,470 --> 00:03:20,410 im Sinn, den ich hinzufügen werde, 44 00:03:20,420 --> 00:03:24,490 aber spielen Sie auf jeden Fall damit herum und wenden Sie Ihre eigenen Stile an. 45 00:03:24,530 --> 00:03:30,620 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 46 00:03:30,620 --> 00:03:34,850 Hintergrundfarbe geben, und Sie können natürlich auch sicherstellen, dass dies von außen eingestellt werden 47 00:03:42,270 --> 00:03:48,960 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 48 00:03:49,100 --> 00:03:55,710 Konstanten / Farben importieren, Farben wie diese und dann hier Farben Primärfarbe verwenden, die Primärfarbe vielleicht so. 49 00:03:55,790 --> 00:04:00,380 Das ist also die Hintergrundfarbe, die diese Schaltfläche haben sollte. Auch hier können Sie mithilfe einer 50 00:04:00,380 --> 00:04:04,090 Requisite, die Sie von außen erhalten, sicherstellen, dass dieser Stil dynamisch eingestellt wird. 51 00:04:04,160 --> 00:04:06,290 Hier werde ich ihn jedoch fest codieren. 52 00:04:06,290 --> 00:04:11,180 Darüber hinaus sollte die Schaltfläche einen gewissen Abstand haben, damit der Text nicht direkt 53 00:04:11,270 --> 00:04:13,130 an den Rändern des Schaltflächencontainers 54 00:04:13,130 --> 00:04:19,310 sitzt, also des Felds um den Text, aber es gibt einen gewissen Abstand, und Sie können den gleichen 55 00:04:19,310 --> 00:04:22,590 Abstand in alle Richtungen verwenden Aber ich möchte eine 56 00:04:22,640 --> 00:04:29,300 Polsterung vertikal von 12 verwenden, also nicht so viel Polsterung oben und unten und eine Polsterung horizontal von sagen 57 00:04:29,300 --> 00:04:32,550 wir 30, also viel mehr Polsterung links und rechts. 58 00:04:32,710 --> 00:04:36,830 Das ist die Schaltfläche, jetzt für den Text der Schaltfläche, dort auch die 59 00:04:36,880 --> 00:04:41,500 Farbe Weiß, die auf unserer Primärfarbe gut aussehen sollte. Sie können auch Schwarz verwenden, da 60 00:04:41,500 --> 00:04:47,290 unsere Primärfarbe tatsächlich eine Farbe ist, in der, wie Sie sehen können, sowohl Weiß als auch Schwarz funktioniert tatsächlich, also 61 00:04:47,410 --> 00:04:49,480 können Sie beides verwenden, aber ich 62 00:04:49,480 --> 00:04:55,840 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. 63 00:04:55,840 --> 00:05:01,780 Wie Sie erfahren haben, müssen Sie diese Option aktivieren Jeder Text, es gibt keine Vererbung, es gibt keine globale Schriftart, 64 00:05:01,780 --> 00:05:07,150 die Sie einrichten könnten. Jeder Text, der diese Schriftart verwenden sollte, muss sie erhalten. Ich werde eine Schriftgröße 65 00:05:07,150 --> 00:05:15,840 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 66 00:05:15,840 --> 00:05:21,720 Presseereignis natürlich normalerweise nicht innerhalb der Taste behandeln, sondern innerhalb der Komponente, 67 00:05:21,720 --> 00:05:24,990 in der wir die Taste verwenden. 68 00:05:25,110 --> 00:05:27,160 Also möchte ich es einfach 69 00:05:27,180 --> 00:05:33,330 weiterleiten und dafür können wir einfach erwarten, eine Funktionsreferenz zu erhalten, eine Event-Handler-Funktion auf der OnPress-Requisite unserer 70 00:05:33,330 --> 00:05:36,490 benutzerdefinierten Schaltfläche, aber Sie können diese Requisite beliebig 71 00:05:36,510 --> 00:05:41,670 benennen, Sie können sie onClick benennen, weil in Am Ende sind Sie es, die 72 00:05:41,670 --> 00:05:42,510 Ihre eigene 73 00:05:42,600 --> 00:05:48,540 Schaltfläche verwenden, und dort müssen Sie nur sicherstellen, dass Sie eine Referenz für die Anpassungsfunktion, einen 74 00:05:48,540 --> 00:05:54,310 Anpassungszeiger für eine Ereignishandlerfunktion an die onPress oder eine beliebige Stütze auf Ihrer eigenen Schaltfläche übergeben. 75 00:05:54,360 --> 00:05:55,680 Dieser Name 76 00:05:55,680 --> 00:05:58,610 liegt also bei Ihnen. Verwenden Sie jetzt 77 00:05:58,610 --> 00:06:02,170 die Hauptschaltfläche und den Startbildschirm. Dort können wir es 78 00:06:02,190 --> 00:06:13,230 einfach importieren, also importieren Sie die Hauptschaltfläche aus Komponenten / Hauptschaltfläche und diese Hauptschaltfläche wird jetzt hier zum Starten eines neuen Spiels 79 00:06:13,230 --> 00:06:14,170 verwendet. 80 00:06:14,230 --> 00:06:16,980 Daher werde ich die Schaltfläche hier durch 81 00:06:16,980 --> 00:06:23,610 die Hauptschaltfläche ersetzen. Beachten Sie jedoch, dass ich auf dieser Schaltfläche den Inhalt und den anzuzeigenden Text so 82 00:06:23,610 --> 00:06:31,440 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 83 00:06:31,440 --> 00:06:32,790 Startspielbildschirm wird der 84 00:06:32,790 --> 00:06:38,760 Titel hier nicht mehr an eine Titelrequisite weitergegeben, sondern wir haben jetzt ein Öffnungs- und Schließ-Tag 85 00:06:38,760 --> 00:06:42,730 für unseren eigenen Button und fügen dort das Startspiel hinzu. 86 00:06:44,110 --> 00:06:50,170 Jetzt ist onPress immer noch eine Requisite, die wir hier lassen, weil ich in der Hauptschaltfläche das onPress-Ereignis 87 00:06:50,230 --> 00:06:54,520 sozusagen an die Funktion weitergebe, die ich hier auf meiner eigenen onPress-Requisite erhalte. 88 00:06:54,520 --> 00:07:00,870 Deshalb müssen wir die onPress-Requisite auf unsere eigene Schaltfläche setzen und daher Damit sollten wir hier einen schönen Hauptknopf 89 00:07:00,870 --> 00:07:04,500 haben, einen schönen Knopf, wenn wir ein neues Spiel starten. 90 00:07:07,840 --> 00:07:09,280 Probieren wir es hier aus, 91 00:07:09,310 --> 00:07:13,680 so sieht es aus und das sieht meiner Meinung nach ganz gut aus, ein schöner Knopf. 92 00:07:13,900 --> 00:07:15,080 Ich bin jedoch 93 00:07:15,220 --> 00:07:19,360 noch nicht fertig, ich möchte abgerundete Ecken auf dieser Schaltfläche haben, 94 00:07:19,360 --> 00:07:24,640 und dafür können wir in der Hauptschaltflächendatei natürlich einfach zu dieser Schaltflächeneigenschaft hier im Stylesheet 95 00:07:24,640 --> 00:07:32,650 gehen, die das Stilobjekt ist, das auf unsere angewendet wird Ansicht und dort können wir einen Randradius von 25 hinzufügen. Wenn wir 96 00:07:32,650 --> 00:07:39,210 das tun, werden Sie sehen, dass wenn ich jetzt diese Schaltfläche bekomme, sie jetzt hier so schön aussieht. 97 00:07:39,450 --> 00:07:45,580 Sie können es auch auf Android anzeigen, haben jetzt abgerundete Ecken und diesen schönen Deckkrafteffekt, wenn Sie darauf tippen. 98 00:07:45,580 --> 00:07:46,120 Übrigens 99 00:07:46,270 --> 00:07:51,680 können Sie diesen Deckkrafteffekt, wie bereits erwähnt, ändern, indem Sie zur berührbaren Deckkraftkomponente gehen, und dort 100 00:07:51,730 --> 00:07:58,080 können Sie Stellen Sie die aktive Deckkraft auf die Deckkraft ein, die Sie beim Drücken haben möchten. Wenn Sie beispielsweise 101 00:07:58,120 --> 00:07:59,090 hier einen ziemlich 102 00:07:59,140 --> 00:08:04,040 hohen Wert verwenden, ist dieser Effekt weniger stark. Jetzt ist er nur geringfügig transparent, 103 00:08:04,060 --> 00:08:10,930 wenn wir darauf tippen, und nicht so transparent wie Vor. Aber es liegt ganz bei Ihnen, was Sie 104 00:08:10,930 --> 00:08:11,980 hier wollen, 105 00:08:11,980 --> 00:08:15,530 ich werde es versuchen. 6 hier, um einen etwas stärkeren 106 00:08:15,610 --> 00:08:21,130 Effekt zu erzielen, aber auch dies können Sie konfigurieren. Im Allgemeinen würde ich vorschlagen, dass Sie damit herumspielen und sehen, wie 107 00:08:21,130 --> 00:08:28,950 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 108 00:08:28,950 --> 00:08:31,140 ich sie auch auf 109 00:08:31,140 --> 00:08:33,170 dem Spiel-Over-Bildschirm 110 00:08:33,270 --> 00:08:42,380 verwenden. Dort importiere ich auch die Hauptschaltfläche aus Komponenten / Hauptschaltfläche wie diese und füge diese 111 00:08:42,610 --> 00:08:49,110 Hauptschaltfläche hier einfach hinzu, wenn wir unsere neue Spielschaltfläche anzeigen dort unten. 112 00:08:49,120 --> 00:08:53,620 Verwenden Sie stattdessen die Hauptschaltfläche. Entfernen Sie daher die Titel-Requisite, da wir 113 00:08:53,620 --> 00:08:55,710 den Titel nicht auf unserer 114 00:08:55,720 --> 00:09:02,840 eigenen benutzerdefinierten Schaltfläche festlegen. Stattdessen müssen wir ihn hier zwischen den öffnenden und schließenden Tags unserer benutzerdefinierten Komponenten-Tags übergeben. 115 00:09:03,040 --> 00:09:11,950 Daher sollte dies jetzt hier auch besser aussehen, wenn wir hier schnell ein Spiel beenden und versuchen, den Computer 33 erraten zu lassen. 116 00:09:11,950 --> 00:09:13,540 Hier sind wir und 117 00:09:17,550 --> 00:09:20,730 jetzt sehen wir auch hier den netten Knopf. 118 00:09:20,730 --> 00:09:24,540 Wir sehen hier auch die richtige Ausgabe in Bezug auf die Anzahl 119 00:09:24,540 --> 00:09:25,440 der Runden 120 00:09:25,440 --> 00:09:30,510 und die Anzahl, die wir erraten mussten, und wir können danach ein neues Spiel starten und 121 00:09:36,440 --> 00:09:44,900 das auch noch einmal ganz schnell durchgehen, ja, das sieht alles sehr gut aus. 122 00:09:44,900 --> 00:09:46,520 Das verbleibende, was ich jetzt noch tun möchte, ist, an diesen beiden Schaltflächen zu arbeiten, niedriger und größer. 123 00:09:46,520 --> 00:09:48,230 Sie sehen ein bisschen langweilig 124 00:09:48,290 --> 00:09:54,200 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, 125 00:09:54,200 --> 00:09:56,690 dass wir dort auch unseren benutzerdefinierten Button verwenden. 126 00:09:57,020 --> 00:10:04,710 Natürlich können wir hier auf dem Spielbildschirm auch die Hauptschaltfläche aus Komponenten / Hauptschaltfläche importieren, also unsere eigene benutzerdefinierte 127 00:10:04,730 --> 00:10:09,650 Schaltfläche, und diese anstelle der derzeit verwendeten Schaltfläche verwenden, die eine integrierte 128 00:10:09,660 --> 00:10:12,070 Schaltfläche ist. Verwenden Sie 129 00:10:12,200 --> 00:10:17,770 hier also unseren eigenen Button. Verschieben Sie daher natürlich den Titel zwischen den 130 00:10:17,870 --> 00:10:24,710 öffnenden und schließenden Tags. Hier ist er also niedriger und hier für den zweiten Button größer. 131 00:10:25,220 --> 00:10:31,610 Dies sollte jetzt ein bisschen besser aussehen, wenn wir hier ein neues Spiel starten . 132 00:10:31,640 --> 00:10:35,470 Jetzt verwenden wir hier unsere benutzerdefinierten Schaltflächen, obwohl wir jetzt auch ein Problem 133 00:10:35,590 --> 00:10:39,440 sehen, es sind einfach ein bisschen zu groß, es sind zu nahe beieinander, 134 00:10:39,530 --> 00:10:44,540 wir können dies jedoch ändern, indem wir zum Schaltflächencontainer gehen und dies ein wenig geben mehr Breite, vielleicht 135 00:10:44,540 --> 00:10:47,550 stellen Sie die maximale Breite hier tatsächlich auf 90% ein. 136 00:10:47,560 --> 00:10:53,490 Wenn wir dies jetzt noch einmal versuchen, ja, das sieht ein bisschen besser aus, es gibt zumindest einen gewissen Abstand 137 00:10:53,490 --> 00:10:58,380 zwischen den Schaltflächen, und dies reicht vorerst aus, da wir derzeit nicht für alle Bildschirmgrößen optimieren. 138 00:10:58,530 --> 00:11:04,140 Erhöhen wir diese Breite hier auch auf 400, damit wir genug Breite haben. Wir verwenden 139 00:11:04,140 --> 00:11:09,160 tatsächlich 400 Pixel und jetzt sieht dies hier auf iOS und auch auf 140 00:11:12,590 --> 00:11:15,880 Android gut aus. Nun, das sieht ein bisschen 141 00:11:15,890 --> 00:11:22,700 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 142 00:11:22,700 --> 00:11:24,650 könnte auch den Trick machen und wir haben 143 00:11:24,650 --> 00:11:30,830 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 144 00:11:30,830 --> 00:11:36,980 sollten sich darüber im Klaren sein, wie Sie mit Symbolen arbeiten, wie Sie Symbole in Ihre App einfügen, und deshalb 145 00:11:36,980 --> 00:11:39,370 werden wir dies als Nächstes tun.