1
00:00:02,130 --> 00:00:03,280
Was ist nun mit

2
00:00:03,280 --> 00:00:07,130
dem Styling, was ist mit diesen Tasten? Bei diesen Schaltflächen stellen

3
00:00:07,130 --> 00:00:10,600
Sie möglicherweise fest, dass Sie jetzt ein seltsames Verhalten haben,

4
00:00:10,610 --> 00:00:18,600
wenn Sie es in den Hochformatmodus zurückschreiben, auch hier auf Android. Wenn wir dagegen etwas ändern und dies rückgängig machen, damit die

5
00:00:18,690 --> 00:00:24,000
App neu gestartet wird und wir im Hochformat starten, sehen Sie, dass es gut aussieht.

6
00:00:24,000 --> 00:00:28,240
Wenn wir jetzt in den Querformatmodus wechseln, sieht es wieder schlecht aus.

7
00:00:28,260 --> 00:00:36,060
Grundsätzlich wird die Breite unserer Schaltflächen beim Start der App angemeldet und nicht angepasst, wenn sich unsere Bildschirmgröße ändert, und natürlich

8
00:00:36,060 --> 00:00:41,670
ändert sich dies, wenn wir das Gerät drehen, da Breite und Höhe vertauscht werden, sodass wir

9
00:00:41,670 --> 00:00:42,320
mehr

10
00:00:42,330 --> 00:00:47,280
Breite zur Verfügung haben, wenn wir Ich bin im Querformat als im Hochformat.

11
00:00:47,280 --> 00:00:53,730
Das Problem ist, dass derzeit auf dem Startbildschirm, wenn wir die Breite unserer Schaltflächen einstellen, die Abmessungen dort

12
00:00:53,730 --> 00:00:59,970
unten verwendet werden, die Abmessungen get verwendet werden. Dies und das ist sehr wichtig zu beachten, dies

13
00:00:59,970 --> 00:01:02,970
wird nur berechnet, wenn Ihre App startet.

14
00:01:02,970 --> 00:01:08,220
Wenn die App zum ersten Mal gestartet wird, wird die verfügbare Breite angezeigt. Wenn sie im Hochformat gestartet wird,

15
00:01:08,220 --> 00:01:08,910
ist dies

16
00:01:08,910 --> 00:01:13,980
die Breite des Hochformatmodus. Wenn sie im Querformat gestartet wird, ist dies die Breite des Querformatmodus und

17
00:01:13,980 --> 00:01:20,390
sie meldet sich an und Wenn Sie das Gerät dann drehen und wenn Sie das Gerät dann drehen, wird dies nicht neu berechnet.

18
00:01:20,550 --> 00:01:25,970
Jetzt möchten Sie natürlich, dass dies neu berechnet wird, und es gibt eine einfache Lösung dafür.

19
00:01:26,100 --> 00:01:33,530
Wenn Sie eine Breite oder Höhe haben, alles, was Sie von Bemaßungen erhalten, die Änderungen der

20
00:01:33,570 --> 00:01:41,430
Ausrichtung berücksichtigen sollten, und die bei Änderungen der Ausrichtung neu berechnet werden sollten, sollten Sie die Bemaßungsbreite dort

21
00:01:41,430 --> 00:01:50,250
unten in Ihrem Stylesheet nicht verwenden, sondern stattdessen die Breite oder verwalten Welche Eigenschaft auch immer sich dynamisch ändern kann

22
00:01:50,570 --> 00:01:57,230
und die Benutzeroberfläche neu gerendert werden sollte, wenn sie sich mit dem Status ändert.

23
00:01:57,230 --> 00:02:00,960
Hier in der Startspielzeichenfolge haben wir bereits

24
00:02:01,130 --> 00:02:11,470
useState. Jetzt können wir auch unsere Schaltflächenbreite hier verwalten, die Schaltflächenbreite mit useState festlegen und diese auf Dimensionen initialisieren,

25
00:02:11,500 --> 00:02:18,290
um die Fensterbreite durch vier zu teilen. Dies ist die Standardeinstellung, mit

26
00:02:18,300 --> 00:02:21,220
der ich begonnen habe.

27
00:02:21,330 --> 00:02:27,660
Jetzt können Sie hier einen Listener für Dimensionen einrichten, anstatt get durch Aufrufen des Listeners für Ereignisereignisse zu verwenden und

28
00:02:28,020 --> 00:02:32,640
das Änderungsereignis anzuhören, das ausgelöst wird, wenn sich die Dimensionen ändern. Dies ist normalerweise der

29
00:02:32,640 --> 00:02:35,000
Fall, wenn der Benutzer das Gerät dreht.

30
00:02:35,010 --> 00:02:43,950
Hier können wir also eine Funktion einrichten, beispielsweise das Layout aktualisieren. Hierbei handelt es sich um eine Funktion, bei der ich set button width aufrufe und hier erneut

31
00:02:43,950 --> 00:02:50,760
auf meine Breite setze. Die Breite der Abmessungen hängt jedoch von der Breite des Bildschirms ab, wenn wir drehen es und

32
00:02:50,760 --> 00:02:52,470
es ist diese Funktion,

33
00:02:52,470 --> 00:02:58,020
die ich hier aufrufen möchte, also ist es das Update-Layout, das ich hier ohne Klammern aufrufen möchte,

34
00:02:58,020 --> 00:03:02,430
weil wir nur auf diese Funktion zeigen möchten, damit sie für uns aufgerufen

35
00:03:02,460 --> 00:03:07,530
wird, wenn sich die Abmessungen ändern, und dies stellt dies sicher Dies wird wiederholt, wenn sich

36
00:03:07,830 --> 00:03:11,160
unsere Abmessungen ändern, und daher wird diese Komponente erneut gerendert.

37
00:03:11,160 --> 00:03:16,100
Jetzt müssen wir nur noch sicherstellen, dass wir diese dynamisch neu berechnete Schaltfläche mit dem Status hier verwenden.

38
00:03:16,230 --> 00:03:20,130
Wir können dies tun, indem wir Inline-Stile anstelle eines Stylesheet-Objekts verwenden.

39
00:03:20,130 --> 00:03:25,770
Wenn Sie für die Schaltfläche andere Stile eingerichtet haben, die nicht von den Abmessungen abhängen, können Sie diese natürlich

40
00:03:25,770 --> 00:03:28,170
hier im Stylesheet belassen. In diesem Fall habe

41
00:03:28,170 --> 00:03:32,910
ich das jedoch nicht, also werde ich dies nur auskommentieren und Sie könnten das dann

42
00:03:32,910 --> 00:03:36,120
mit einigen Inline-Stilen zusammenführen. Da wir hier keine

43
00:03:36,120 --> 00:03:41,550
anderen Standardstile haben, werde ich dieses Stylesheet-Objekt, auf das wir zeigen, einfach durch ein Inline-Stilobjekt ersetzen, bei

44
00:03:41,550 --> 00:03:47,070
dem ich die Breite gleich der Schaltflächenbreite setze und dies natürlich auch für meine zweite Schaltfläche und damit

45
00:03:47,130 --> 00:03:51,390
auch für uns tue Das Styling ändert sich jetzt, wenn wir das Gerät drehen.

46
00:03:51,390 --> 00:03:55,550
Wenn wir dies speichern, werden Sie sehen, dass dies jetzt gut

47
00:03:55,550 --> 00:04:00,350
aussieht, egal wie wir es drehen, auch unter Android, da dies neu gerendert wird.

48
00:04:00,570 --> 00:04:07,050
Jetzt ein wichtiger Hinweis hier, im Moment, in dem ich hier eine Reihe von Ereignis-Listenern einrichte, füge ich immer einen

49
00:04:07,050 --> 00:04:11,670
neuen Ereignis-Listener hinzu, wenn diese Komponente neu gerendert wird, und das ist nicht das,

50
00:04:11,670 --> 00:04:12,500
was ich

51
00:04:12,720 --> 00:04:19,320
tun möchte, und wir können es verwenden Effekt, der auch in React integriert ist und den Sie beachten sollten, um

52
00:04:19,410 --> 00:04:23,540
Code zu haben, den wir ausführen, wenn unsere Komponente erneut gerendert wird.

53
00:04:23,620 --> 00:04:31,020
Jetzt kann ich hier den Use-Effekt verwenden, und die Funktion, die ich bei jedem erneuten Rendern ausführen möchte, ist

54
00:04:31,020 --> 00:04:36,210
eine Funktion, die am Ende diese Update-Layout-Funktion hier erstellt und meinen Ereignis-Listener hinzufügt.

55
00:04:36,270 --> 00:04:41,580
Daher schneide ich diese aus und füge sie hier hinzu In Use-Effekt-Funktion und

56
00:04:41,580 --> 00:04:46,950
wenn wir dann hier etwas in Use-Effekt zurückgeben, ist dies unsere Bereinigungsfunktion, die direkt

57
00:04:46,950 --> 00:04:54,940
vor dem Ausführen des Use-Effekts ausgeführt wird. Dort möchte ich meinen Listener bereinigen, da ich hier Dimensionen aufrufen kann, um

58
00:04:54,950 --> 00:04:57,900
die Ereignis-Listener-Änderung zu entfernen Layout aktualisieren.

59
00:04:57,900 --> 00:05:02,840
Jetzt bereinigen wir dies und richten eine neue ein, wenn unsere Komponente neu gerendert wird, bereinigen die alte,

60
00:05:02,840 --> 00:05:06,610
richten eine neue ein und haben daher immer nur einen laufenden Ereignis-Listener.

61
00:05:06,770 --> 00:05:13,350
Wenn wir es so machen, ist das einfach sauberer. Wenn wir dies jetzt speichern und zurückgehen, haben wir

62
00:05:13,350 --> 00:05:19,650
das gleiche Verhalten wie zuvor, aber jetzt auf saubere Weise, indem wir useState und use effect

63
00:05:19,950 --> 00:05:26,370
und vor allem die Event-Listening-Funktionen von verwenden Die Dimensions-API, mit der wir Dimensionen nicht nur einmal festlegen,

64
00:05:26,610 --> 00:05:29,040
sondern bei Änderungen neu berechnen können.