1
00:00:02,220 --> 00:00:08,250
Wenn ich nun mit diesen ersten grundlegenden Schritten eine Zahl hier eingebe und wir fortfahren, sieht das alles für

2
00:00:08,250 --> 00:00:10,330
mich hier gut aus, das alles

3
00:00:10,420 --> 00:00:12,980
funktioniert, wenn wir jetzt ein Spiel starten, dann

4
00:00:12,990 --> 00:00:19,560
möchte ich auch diesen Abstand verringern, den wir haben hier und ich möchte auch sicherstellen, dass meine Box dort unten

5
00:00:19,560 --> 00:00:20,020
ist,

6
00:00:20,040 --> 00:00:23,240
also dieses Protokoll der Vermutungen, die wir haben, dass dies

7
00:00:23,250 --> 00:00:24,490
auch besser aussieht.

8
00:00:25,050 --> 00:00:29,820
Das können wir natürlich auf dem Spielbildschirm tun, denn das ist der Bildschirm, den

9
00:00:29,820 --> 00:00:31,350
wir gerade dort anzeigen.

10
00:00:31,410 --> 00:00:37,410
Zum einen ist es natürlich der Abstand, dieser Rand oben auf unserem unteren Container, der dieser Container ist, der Rand oben ist dieser Abstand zwischen

11
00:00:37,590 --> 00:00:43,370
der Zahl hier und dem Container, und ich möchte dies ändern. Um dies zu ändern, können

12
00:00:43,510 --> 00:00:44,720
wir

13
00:00:44,760 --> 00:00:47,120
wieder die Dimensions-API verwenden.

14
00:00:47,280 --> 00:00:54,300
Hier importiere ich also wieder Dimensionen aus React Native und jetzt dort

15
00:00:54,510 --> 00:01:03,630
unten können wir diese Marge dynamisch berechnen. Was wir hier tun können, ist, dass wir wieder die Abmessungen unseres Fensters und

16
00:01:03,870 --> 00:01:09,630
dann hier die Breite oder in diesem Fall wahrscheinlich die Höhe erhalten und dies dann durch etwas teilen können,

17
00:01:09,630 --> 00:01:17,430
aber dies wäre sehr umständlich, wir könnten dies zum Beispiel durch 20 teilen , bis 20 und sehen, ob das gut aussieht, aber das ist

18
00:01:17,430 --> 00:01:21,990
dann wirklich ein Ratespiel, dann ist es vielleicht nicht das, was wir wirklich wollen.

19
00:01:22,230 --> 00:01:28,320
Stattdessen könnten wir überprüfen, wie viel Höhe wir zur Verfügung haben, und dann

20
00:01:28,320 --> 00:01:34,920
einen anderen Abstand verwenden, der darauf basiert. Wir könnten überprüfen, ob unsere Größe größer als 600 ist. Wenn dies der Fall ist,

21
00:01:35,310 --> 00:01:41,490
möchten wir einen Abstand von 20 haben, andernfalls haben wir einen von 10. Wir können also die Dimensionen, die wir berechnen, auch

22
00:01:41,490 --> 00:01:46,920
in einer if-Bedingung verwenden, in diesem Fall in einem ternären Ausdruck hier, aber Sie können

23
00:01:46,920 --> 00:01:49,890
sie auch in einer normalen if-Prüfung verwenden.

24
00:01:49,970 --> 00:01:56,300
Jetzt können wir hierher zurückkehren und sehen jetzt, dass wir zu Beginn des Spiels keine so große Lücke hier

25
00:01:56,300 --> 00:02:01,580
auf dem kleineren Bildschirm haben, auf dem iPhone, das ein größerer Bildschirm ist, aber definitiv einen

26
00:02:01,670 --> 00:02:05,960
haben Größere Lücke und um das klarer zu sehen, können Sie natürlich damit

27
00:02:06,050 --> 00:02:12,690
herumspielen und zum Beispiel 30 für kleinere Bildschirme und 30 für größere Bildschirme und 5 für kleinere Bildschirme verwenden, und

28
00:02:12,800 --> 00:02:15,170
jetzt sollten Sie das definitiv sehen.

29
00:02:15,350 --> 00:02:17,680
Hier haben wir eine kleine Lücke

30
00:02:17,840 --> 00:02:20,450
und hier haben wir eine größere Lücke.

31
00:02:20,750 --> 00:02:23,540
Wir können dies also auch unter if-Bedingungen verwenden.

32
00:02:23,540 --> 00:02:29,060
Damit werde ich dies hier auf 20 und 5 zurücksetzen, aber dies zeigt jetzt hoffentlich auch eine andere Möglichkeit,

33
00:02:29,060 --> 00:02:30,110
dies zu verwenden.

34
00:02:30,110 --> 00:02:34,700
Sie können dies unter Bedingungen verwenden, die Ihnen natürlich viel Flexibilität bieten, wenn Sie

35
00:02:34,700 --> 00:02:40,670
die Breite nicht in einer dynamischen Berechnung verwenden möchten, aber unterschiedliche fest codierte Werte haben, die Sie basierend

36
00:02:40,670 --> 00:02:46,730
auf den verschiedenen gewünschten Haltepunkten verwenden möchten set, ein bisschen wie Sie es von CSS kennen, wo Sie

37
00:02:46,730 --> 00:02:51,080
auch Medienabfragen haben und dann können Sie verschiedene Dinge basierend auf verschiedenen

38
00:02:51,080 --> 00:02:51,830
Medienabfragen rendern.

39
00:02:52,070 --> 00:02:57,740
Natürlich können Sie die Dimensions-API auch nicht in Ihrem Stylesheet verwenden. Sie können sie überall dort verwenden, wo

40
00:02:57,740 --> 00:03:04,100
Sie Javascript verwenden können, also grundsätzlich überall in Ihren Komponenten. Sie können auch ganz andere Stile anhängen,

41
00:03:04,130 --> 00:03:10,070
je nach verfügbarer Breite oder Höhe. Wir könnten hier auch das Fenster

42
00:03:10,100 --> 00:03:18,050
"Abmessungen abrufen" verwenden, in dem ich meinen Stil zuweise, und beispielsweise meine Höhe hier überprüfen, prüfen, ob sie

43
00:03:18,050 --> 00:03:25,400
größer als 600 ist. Wenn dies der Fall ist, verwenden Sie den Schaltflächencontainer "Stile" und andernfalls den

44
00:03:25,520 --> 00:03:31,520
Schaltflächencontainer "Stile", wenn wir diesen haben Klasse. Ich habe es hier nicht, also werde ich es loswerden, aber das ist eine andere

45
00:03:31,670 --> 00:03:37,280
Möglichkeit, dies zu verwenden. Sie können es überall dort verwenden, wo Javascript ausgeführt wird. Sie können es natürlich auch hier verwenden. Sie

46
00:03:37,280 --> 00:03:45,690
können hier eine if-Prüfung durchführen lassen, bevor Sie Ihren jsx-Code zurückgeben und die Fensterhöhe abrufen. Wenn diese größer als 600 ist und wenn dies der Fall

47
00:03:45,690 --> 00:03:49,830
ist, geben Sie beispielsweise einen völlig anderen jsx-Code zurück Dieser Code wird danach

48
00:03:49,830 --> 00:03:55,910
nie mehr ausgeführt, wenn Sie hierher zurückkehren, und nur dann, wenn Sie es nicht schaffen, wenn Sie dies überprüfen.

49
00:03:55,910 --> 00:03:57,230
Wenn Sie also

50
00:03:57,230 --> 00:04:02,560
ein Gerät haben, das nicht so groß ist wie dieses, dann schaffen Sie es dort unten.

51
00:04:02,600 --> 00:04:09,260
Sie sind hier also wirklich flexibel und nutzen diese Flexibilität, um die gewünschten Layouts zu erstellen, denn darum

52
00:04:09,410 --> 00:04:14,020
geht es hier und Sie erhalten viel Flexibilität für Ihre Apps.

53
00:04:14,120 --> 00:04:15,440
Das ist also

54
00:04:15,440 --> 00:04:19,210
der Abstand hier, jetzt wollte ich auch meine Protokollelemente dort unten ändern,

55
00:04:19,340 --> 00:04:21,560
das können wir natürlich auch leicht tun.

56
00:04:21,740 --> 00:04:28,400
Wir haben dort unsere Listenelemente und auf den Listenelementen legen wir eine Breite von 100% fest, da wir hier unsere

57
00:04:28,400 --> 00:04:32,330
Listenbreite mit dem Listencontainer festlegen und diese auf 60% festgelegt ist.

58
00:04:32,600 --> 00:04:36,750
Jetzt sehen 60% auf größeren Geräten ziemlich gut aus, aber

59
00:04:36,910 --> 00:04:40,280
auf kleineren Geräten könnten wir größer werden.

60
00:04:40,280 --> 00:04:48,050
Jetzt können wir natürlich noch einmal versuchen, dies mit anderen Regeln zu lösen, wobei wir eine maximale Breite und eine minimale

61
00:04:48,050 --> 00:04:55,370
Breite festlegen und möglicherweise auch die Dimensions-API verwenden, um dies dynamisch zu berechnen, oder wir verwenden erneut eine if-Prüfung.

62
00:04:55,910 --> 00:05:03,500
Hier könnten wir wieder sagen, dass Dimensionen Fenster bekommen, in diesem Fall die verfügbare Breite erhalten und wenn

63
00:05:03,500 --> 00:05:07,340
das sagen wir größer als 500 ist, dann

64
00:05:07,340 --> 00:05:15,220
möchte ich 60% verwenden, andernfalls möchte ich 80% verwenden. Jetzt rendern wir einfach einen breiteren, breiteren Listencontainer basierend auf der

65
00:05:15,220 --> 00:05:18,070
verfügbaren Breite auf dem Gerät, auf dem wir

66
00:05:18,250 --> 00:05:19,340
ausgeführt werden,

67
00:05:19,420 --> 00:05:24,490
und verwenden hier tatsächlich 350, möglicherweise anstelle von 500, da es sich um die Breite

68
00:05:24,490 --> 00:05:26,350
und nicht um die Höhe handelt.

69
00:05:26,380 --> 00:05:31,630
Wenn wir dies jetzt auf dem iPhone ausführen, haben wir die gleiche Breite wie zuvor, aber auf dem kleineren

70
00:05:32,080 --> 00:05:33,820
Bildschirm haben wir größere Elemente.

71
00:05:33,820 --> 00:05:37,650
Das können wir also auch tun, und Sie können natürlich mit dem Haltepunkt herumspielen,

72
00:05:37,690 --> 00:05:39,140
den Sie hier effektiv festlegen.

73
00:05:39,160 --> 00:05:41,290
Hier können Sie verschiedene Haltepunktgrößen ausprobieren.

74
00:05:41,320 --> 00:05:43,420
Natürlich können Sie auch mehrere Haltepunkte haben,

75
00:05:43,420 --> 00:05:48,940
Sie können hier verschachtelte ternäre Ausdrücke haben oder bevor Sie zu viele verschachtelte Ausdrücke schreiben, richten Sie einfach verschiedene Stilobjekte

76
00:05:48,940 --> 00:05:56,500
hier ein, die Sie dann mit verschiedenen, wenn Sie dort verwendeten Prüfungen laden, laden. Um Ihnen ein Beispiel dafür zu geben,

77
00:05:56,500 --> 00:06:03,820
wir könnten hier und da einen großen Listencontainer haben, wir setzen Flex eins und wir setzen

78
00:06:03,820 --> 00:06:09,320
unsere Breite von sagen wir 80%, weil dies der große ist und

79
00:06:09,450 --> 00:06:13,380
hier haben wir den normalen mit 60% .

80
00:06:13,380 --> 00:06:18,400
Jetzt habe ich dort unten keine if-Bedingung, aber ich habe zwei verschiedene

81
00:06:18,400 --> 00:06:22,320
Stilobjekte und jetzt müssen wir nur noch verschiedene Stilobjekte

82
00:06:22,680 --> 00:06:31,780
dort oben anhängen, nicht hier, sondern hier natürlich in dieser Ansicht. Um dies zu tun, können wir hier einfach eine Stilvariable für Listencontainer einrichten

83
00:06:31,780 --> 00:06:38,740
und auf den Listencontainer für Stile verweisen, der unsere Standardeinstellung ist. Fügen Sie dann hier eine if-Prüfung hinzu, in der

84
00:06:38,830 --> 00:06:46,750
überprüft wird, ob die Abmessungen die Fensterbreite und jetzt die Breite hier erhalten Nehmen wir an, wir sind kleiner als 350. Wenn wir

85
00:06:46,750 --> 00:06:51,910
also ein kleines Gerät haben, möchten wir den großen Listencontainer haben. Dann können wir

86
00:06:51,910 --> 00:06:53,470
den Listencontainerstil festlegen.

87
00:06:53,470 --> 00:06:55,960
Diese Variable entspricht dem Stillistencontainer, der groß

88
00:06:55,960 --> 00:07:01,960
ist, um auf dieses Stilobjekt und jetzt zu zeigen Wir können dieses Stilobjekt hier in der Ansicht

89
00:07:01,960 --> 00:07:07,180
verwenden, in der wir den Listencontainerstil benötigen. Wir verwenden jetzt die Variable, die ein anderes

90
00:07:07,330 --> 00:07:13,060
Listencontainerstilobjekt enthält, basierend auf der Breite unseres Geräts. Und wenn wir dies jetzt speichern und erneut ausführen,

91
00:07:13,060 --> 00:07:19,270
sehen Sie, dass wir auf dem iPhone mit dem größeren Gerät, auf dem wir mehr Breite haben, den kleineren Container

92
00:07:19,270 --> 00:07:24,200
und hier auf dem Android-Handy mit dem kleineren Gerät mit weniger Breite erhalten der größere Behälter.

93
00:07:24,280 --> 00:07:26,980
Es ist also das gleiche Ergebnis

94
00:07:27,070 --> 00:07:32,080
wie zuvor, aber etwas lesbarer, und jetzt könnten wir mehrere solcher Überprüfungen durchführen, bei

95
00:07:32,080 --> 00:07:34,900
denen wir hier verschiedene Stile im Listencontainer-Stil speichern,

96
00:07:34,900 --> 00:07:42,070
den wir dann dort unten verwenden. Dies kann besser lesbar sein als verschachtelte ternäre Ausdrücke dort unten in Ihrem Stylesheet-Objekt.

97
00:07:42,070 --> 00:07:47,650
So können Sie damit herumspielen und sich der Flexibilität der Dimensions-API bewusst zu sein, ist

98
00:07:47,770 --> 00:07:48,970
hier wirklich entscheidend.