1
00:00:02,150 --> 00:00:06,950
Jetzt, da unsere benutzerdefinierten Schriftarten hinzugefügt wurden, können wir sie jetzt in unserer Anwendung

2
00:00:06,950 --> 00:00:12,740
verwenden, und ich möchte sie an allen Stellen verwenden, an denen wir einige Texte anzeigen, wie

3
00:00:13,130 --> 00:00:17,410
hier bei Ihnen, hier bei den Gegnern und dann auch auf der

4
00:00:17,410 --> 00:00:24,010
Übersichtsseite. Das wird auch hier in dieser Anwendung ein Ziel sein und außerdem möchte ich, wenn ein Spiel vorbei

5
00:00:24,020 --> 00:00:30,770
ist, nicht nur unsere benutzerdefinierte Schriftart hier auf dieser Spiel-Over-Seite verwenden, sondern auch ein Bild zeigen, ein Spiel vorbei

6
00:00:30,830 --> 00:00:32,460
Bild hier, das ist

7
00:00:32,510 --> 00:00:34,830
das nächste, woran ich arbeiten möchte.

8
00:00:34,850 --> 00:00:42,770
Der erste Schritt besteht darin, diesen Text hier durch den Text zu ersetzen, um die Schriftart zu verwenden. Daher importiere ich Text

9
00:00:42,770 --> 00:00:49,970
aus dem Komponentenordner und dort aus dem Text und ersetze dann alle diese Textkomponenten hier durch Text, einfach so, wenn

10
00:00:49,970 --> 00:00:54,200
ein Spiel stattfindet ist vorbei, wir verwenden unsere benutzerdefinierte Schriftart, das ist

11
00:00:54,200 --> 00:00:55,450
das Ziel hier.

12
00:00:55,730 --> 00:00:57,950
Aber so wie ich gerade

13
00:00:57,950 --> 00:01:03,200
gesagt habe, sollte hier vor allem passieren, dass wir hier auch ein Bild haben.

14
00:01:03,260 --> 00:01:11,360
Nehmen wir also an, wir haben das Spiel tatsächlich über dem Titel, also verwenden wir den Titeltext hier, vielleicht jetzt,

15
00:01:11,360 --> 00:01:12,350
wo ich

16
00:01:12,530 --> 00:01:16,460
darüber nachdenke, Titeltext anstelle von Textkörper, aber unter diesem Titel,

17
00:01:16,460 --> 00:01:19,830
also unter dem Spiel, zeigen wir einen Bild.

18
00:01:19,880 --> 00:01:27,740
Hier möchte ich eine Komponente verwenden, mit der wir tatsächlich ein Bild anzeigen können, und React

19
00:01:27,800 --> 00:01:36,470
Native verfügt über eine solche Komponente, eine Bildkomponente. Wir können das Bild hier einfach so als normale Komponente in

20
00:01:36,470 --> 00:01:43,490
unserem jsx-Code verwenden, es ist eine selbstschließende Komponente, ein Bild hat eine wichtige Requisite und das ist die Quell-Requisite

21
00:01:43,490 --> 00:01:51,170
und die Quell-Requisite, wie der Name schon sagt, muss so eingestellt sein, dass sie darauf zeigt ein Bild und jetzt gibt es

22
00:01:51,170 --> 00:01:58,430
zwei Arten von Bildern, die Sie verwenden können - lokale Bilder, die Sie als Teil Ihrer App versenden, die Sie

23
00:01:58,430 --> 00:02:05,600
also in Ihren Quellcode aufnehmen, in Ihr App-Bundle am Ende oder Netzwerkbilder, und wir haben eine schau dir beide an.

24
00:02:05,610 --> 00:02:14,280
Beginnen wir nun mit einem lokalen Bild und im Anhang finden Sie diesen Erfolg. PNG-Datei, die Sie in Ihren Assets-Ordner ziehen können, also nicht

25
00:02:14,280 --> 00:02:17,000
im dortigen Fonts-Ordner, sondern nur in Assets,

26
00:02:17,370 --> 00:02:23,430
oder Sie erstellen einen Unterordner für Bilder, wenn Sie möchten, spielt keine Rolle, ich

27
00:02:23,430 --> 00:02:24,240
habe

28
00:02:24,270 --> 00:02:25,150
sie nur

29
00:02:25,170 --> 00:02:31,550
hier in Assets Es ist dieser Erfolg. PNG-Datei und dies ist die Datei, die ich

30
00:02:31,560 --> 00:02:39,480
hier verwenden möchte, also das Bild, das ich hier rendern möchte. Um dieses Bild hier zu rendern, verwenden wir eine spezielle

31
00:02:39,660 --> 00:02:46,040
Syntax, die beim ersten Mal seltsam aussehen kann. Sie haben diese Anforderungsfunktion verwendet, die in Javascript integriert

32
00:02:46,050 --> 00:02:52,440
ist oder von React Native in Javascript unterstützt wird. Nehmen wir an, Sie übergeben eine Zeichenfolge als Argument, und dies

33
00:02:53,010 --> 00:02:57,840
ist die Zeichenfolge, die auf das Bild zeigt, und dies sollte ein relativer Pfad sein

34
00:02:57,840 --> 00:02:59,240
Wir befinden uns

35
00:02:59,250 --> 00:03:04,530
im Bildschirmordner, müssen eine Ebene nach oben gehen, dann in den Ordner "Assets" und dann können

36
00:03:04,530 --> 00:03:07,450
wir hier auf Erfolg hinweisen. png,

37
00:03:07,470 --> 00:03:09,090
einfach so.

38
00:03:09,150 --> 00:03:14,490
Dies sagt React Native nun, dass wir dieses Bild hier und hinter den Kulissen verwenden

39
00:03:14,490 --> 00:03:20,190
möchten. Es ermöglicht React Native, dies effektiv zu laden und auch das Bild zu betrachten und

40
00:03:20,430 --> 00:03:21,340
beispielsweise seine

41
00:03:21,360 --> 00:03:28,830
Breite und Höhe zu bestimmen. Deshalb verwenden wir dieses seltsame Bild erfordern Syntax und wir müssen lokale Bilder wie diese laden.

42
00:03:30,010 --> 00:03:32,280
Um das Ergebnis

43
00:03:32,410 --> 00:03:39,400
zu sehen, werde ich die App optimieren. js-Datei vorübergehend, um sicherzustellen, dass das Spiel dort immer über dem

44
00:03:39,400 --> 00:03:46,060
Bildschirm angezeigt wird, damit ich nicht immer den gesamten Bildschirm durchgehen muss, um zu überprüfen, ob es aktualisiert und geändert wurde.

45
00:03:46,660 --> 00:03:53,590
Das Spiel über dem Bildschirm ist das, was ich hier von Anfang an vorübergehend als Hauptinhalt verwenden werde, und ich werde einfach einige Dummy-Nummern

46
00:03:53,590 --> 00:03:57,850
für Rundennummer und Benutzernummer übergeben. Wiederum mache ich dies nur, damit wir beginnen das Spiel

47
00:03:57,880 --> 00:04:04,390
über dem Bildschirm hier und sehen, was dies uns gibt. Und wir können sehen, was uns

48
00:04:04,480 --> 00:04:10,730
das gibt, es gibt uns am Ende ein Vollbild, ein wirklich großes Bild.

49
00:04:10,780 --> 00:04:14,140
Der Grund dafür ist, dass das Bild, das ich Ihnen gegeben habe,

50
00:04:14,200 --> 00:04:17,590
ziemlich groß ist, dieser Erfolg. Die PNG-Datei ist keine kleine

51
00:04:17,710 --> 00:04:22,040
Datei, sondern ein ziemlich großes Bild in Bezug auf die Pixel, ihre Breite und Höhe.

52
00:04:22,210 --> 00:04:29,320
Und wie gesagt, wenn Sie Requirement wie dieses verwenden, ist das Gute, dass React Native sich die Bilddatei ansieht, ihre Breite und

53
00:04:29,320 --> 00:04:34,020
Höhe bestimmt und hier dieselbe Breite und Höhe verwendet, was bedeutet, dass wir dieses

54
00:04:34,020 --> 00:04:41,050
riesige Bild hier in der Anwendung rendern und der Nachteil ist einfach, dass dies jetzt nicht mehr auf den Bildschirm passt

55
00:04:41,050 --> 00:04:45,450
oder den gesamten Bildschirm einnimmt, weil es eine zu große Datei ist.

56
00:04:45,550 --> 00:04:50,440
Wenn wir ein kleineres Bild hätten, wäre dies kein Problem, dann würde es nur einen Teil des Bildschirms einnehmen,

57
00:04:50,440 --> 00:04:54,160
aber da es ein großes Bild ist, nimmt es den gesamten Bildschirm ein.