1
00:00:02,290 --> 00:00:09,430
Teraz, gdy działa ogólna logika gry, skupmy się bardziej na dokończeniu tej stylizacji, a także

2
00:00:09,700 --> 00:00:16,180
na dodaniu własnych niestandardowych czcionek i ładnego małego obrazu w grze na ekranie,

3
00:00:16,180 --> 00:00:23,530
ponieważ praca z obrazami i praca z niestandardowymi czcionkami jest typową rzeczą we współczesnym tworzenie aplikacji

4
00:00:23,530 --> 00:00:30,520
oczywiście rzadko chcesz trzymać się domyślnych czcionek systemowych i rzadko masz aplikację bez żadnych obrazów.

5
00:00:30,520 --> 00:00:37,390
Dlatego zacznijmy od niestandardowych czcionek i w expo React Native dodawanie czcionek jest bardzo proste.

6
00:00:38,200 --> 00:00:40,820
W folderze projektu, w

7
00:00:40,870 --> 00:00:47,000
folderze zasobów, utwórzmy folder czcionek. Możesz przechowywać to w dowolnym miejscu, ale

8
00:00:47,050 --> 00:00:52,560
lubię przechowywać go w folderze zasobów, aby uporządkować moje zasoby, takie jak czcionki i obrazy.

9
00:00:53,080 --> 00:00:58,270
Więc tutaj, w folderze czcionek, nie jest zaskoczeniem, że chcę zarządzać czcionkami i do

10
00:00:58,270 --> 00:01:03,460
tego dołączam plik zip z dwiema czcionkami, które możesz po prostu wyodrębnić, a następnie

11
00:01:03,560 --> 00:01:06,730
przeciągnąć i upuścić tutaj, to jest OpenSans-Bold i

12
00:01:06,730 --> 00:01:12,790
OpenSans-Regular, więc te dwie czcionki są dołączone do tego filmu w pliku zip, rozpakowane i przeciągnij je

13
00:01:12,790 --> 00:01:14,100
do folderu czcionek.

14
00:01:14,110 --> 00:01:22,390
Teraz te czcionki są ogólnie dostępne, ale aby ich użyć, nadal musisz skonfigurować więcej.

15
00:01:22,460 --> 00:01:29,780
Musisz przejść do swojej aplikacji. plik js i po prostu poinstruuj React Native i expo, aby

16
00:01:29,810 --> 00:01:37,920
załadował te czcionki, aby ich użyć. Do tego w aplikacji. plik js i korzystam z aplikacji. plik js, ponieważ jest

17
00:01:38,010 --> 00:01:43,560
to pierwszy plik, który jest ładowany lub który jest wykonywany, aby powiedzieć, kiedy

18
00:01:43,590 --> 00:01:51,060
aplikacja się uruchamia i chcesz załadować czcionki po uruchomieniu aplikacji, tam musisz dodać import, a import polega na

19
00:01:51,060 --> 00:01:58,630
tym, że importujesz wszystko jako czcionka, chociaż ta nazwa zależy od ciebie, ale zazwyczaj używasz tutaj czcionki z expo-font.

20
00:01:59,140 --> 00:02:07,380
Więc expo-font to pakiet, który daje ci narzędzia do czcionek, więc narzędzia, które pozwalają ci ładować czcionki i importować wszystko

21
00:02:07,800 --> 00:02:13,140
z tego pakietu i łączyć je razem w tym obiekcie czcionek, właśnie to

22
00:02:13,140 --> 00:02:15,800
robimy tutaj. Teraz, aby

23
00:02:15,950 --> 00:02:21,920
załadować czcionki, dodam nową funkcję poza komponentem funkcjonalnym, ponieważ ta funkcja nie

24
00:02:21,920 --> 00:02:26,580
musi być odtwarzana dla każdego cyklu ponownego wysyłania komponentu.

25
00:02:26,610 --> 00:02:27,860
Teraz nadam mu nazwę

26
00:02:27,870 --> 00:02:29,060
pobierania czcionek,

27
00:02:29,330 --> 00:02:31,190
nazwa należy do Ciebie i

28
00:02:34,010 --> 00:02:38,640
tutaj, w tej funkcji, wywołam czcionkę. loadAsync.

29
00:02:38,710 --> 00:02:43,810
Teraz jest to funkcja lub metoda w pakiecie czcionek, którą tutaj importujemy, która

30
00:02:43,810 --> 00:02:52,050
pozwala ładować czcionki, a to, co przekazujesz, aby załadować asynchronię, jest obiektem, w którym informujesz Expo, a zatem React Native o

31
00:02:52,120 --> 00:02:57,010
wszystkich czcionkach, które chcesz obciążenie. Robisz to za pomocą klawisza, w którym

32
00:02:57,310 --> 00:03:02,710
wybierasz dowolną nazwę, na przykład open-sans, a później będziesz mógł używać tych czcionek pod tymi nazwami,

33
00:03:02,710 --> 00:03:06,400
więc tutaj otwórz sans, ponieważ moja czcionka nazywa się open sans.

34
00:03:06,400 --> 00:03:10,510
Więc tutaj jest otwarty sans, a następnie dodajesz wymaganie,

35
00:03:10,840 --> 00:03:17,180
jest to funkcja językowa, którą JavaScript oferuje, wskazując ścieżkę, w której ta czcionka jest przechowywana.

36
00:03:17,200 --> 00:03:18,310
To ścieżka

37
00:03:18,340 --> 00:03:20,820
względna, więc tutaj wskazuję folder zasobów, folder

38
00:03:20,850 --> 00:03:28,760
czcionek, a następnie jest to OpenSans-Bold, nie pogrubiony, ale regularny. plik ttf, a teraz dodam tutaj drugi

39
00:03:28,760 --> 00:03:36,210
element do tego obiektu, który przekazuję, aby załadować asynchronię i który może być open-sans-bold.

40
00:03:36,210 --> 00:03:40,660
Teraz te nazwy są całkowicie od Ciebie i tam chcę załadować odważną wersję.

41
00:03:41,290 --> 00:03:48,160
W związku z tym informujemy React Native na końcu, gdzie żyją nasze czcionki, gdzie te pliki czcionek żyją i na jakie nazwy chcemy je

42
00:03:48,160 --> 00:03:56,650
zamapować, a my możemy później użyć tych nazw do przypisania tych czcionek do tekstu. Teraz ładowanie asynchroniczne faktycznie zwraca obietnicę, co oznacza, że potrwa

43
00:03:56,770 --> 00:04:03,550
to trochę dłużej, a nie bardzo długo, ale nie załaduje ich natychmiast i zwrócę tę obietnicę tutaj

44
00:04:03,550 --> 00:04:09,360
wewnątrz czcionek pobierania, aby za każdym razem, gdy wywołujemy czcionki pobierania, możemy poczekać aby

45
00:04:09,360 --> 00:04:15,600
ta obietnica została rozwiązana, zanim będziemy kontynuować. Skąd jednak

46
00:04:15,600 --> 00:04:19,610
chcemy pobrać nasze czcionki?

47
00:04:19,670 --> 00:04:26,720
Cóż, moglibyśmy ręcznie załadować nasze czcionki tutaj, moglibyśmy na przykład wywoływać czcionki pobierania tego typu i to robiłoby to dalej i

48
00:04:26,720 --> 00:04:28,180
pobierałoby nasze czcionki,

49
00:04:28,190 --> 00:04:34,220
ale problem polega na tym, że kontynuowalibyśmy renderowanie i ostatecznie renderowalibyśmy naszą zawartość, a jeśli w ogóle w

50
00:04:34,220 --> 00:04:38,190
treści, używamy tekstu, który próbuje użyć takiej czcionki, jeśli czcionka nie

51
00:04:38,300 --> 00:04:43,850
została jeszcze załadowana i jak powiedziałem, zajmie to tylko kilka milisekund, ale nadal w pierwszym cyklu

52
00:04:43,850 --> 00:04:50,660
renderowania, czcionka mogła nie zostać załadowana, a następnie dostalibyśmy błąd. Dlatego ładowanie naszych czcionek w

53
00:04:50,660 --> 00:04:55,400
ten sposób nie jest zalecane, najprawdopodobniej nie będzie działać.

54
00:04:55,430 --> 00:05:03,310
Zamiast tego istnieje specjalny komponent, którego można użyć, który pomaga załadować czcionki. Importujesz ten komponent

55
00:05:03,310 --> 00:05:10,450
z expo, a nazwa tego komponentu to AppLoading.

56
00:05:10,460 --> 00:05:17,480
Teraz jest to komponent, który zasadniczo wydłuża domyślny ekran ładowania, użytkownicy ekranu powitalnego i tak

57
00:05:17,570 --> 00:05:24,860
widzą się podczas uruchamiania aplikacji, wydłuży ten ekran, aby pozostać aktywny, dopóki nie zostanie wykonane

58
00:05:24,860 --> 00:05:26,150
określone zadanie,

59
00:05:26,150 --> 00:05:29,610
na przykład do czasu pobrania czcionek gotowy.

60
00:05:29,960 --> 00:05:35,180
Tak więc AppLoading jest w komponencie aplikacji, musimy tylko upewnić

61
00:05:35,190 --> 00:05:41,520
się, że renderujemy ten komponent zamiast naszej faktycznej zawartości, o ile nie

62
00:05:41,520 --> 00:05:43,650
załadowaliśmy jeszcze naszych

63
00:05:43,740 --> 00:05:49,000
czcionek lub dopóki nie skończymy z ładowaniem czegokolwiek chcieliśmy załadować.

64
00:05:49,120 --> 00:05:55,390
Fajne jest to, że możemy do tego użyć stanu i zacząć od wartości

65
00:05:55,390 --> 00:06:04,240
początkowej false, ponieważ stan, którym chcę tu zarządzać, to ładowane dane lub jakkolwiek chcesz to nazwać i ustawić ładowane dane.

66
00:06:04,350 --> 00:06:11,880
Teraz chcę sprawdzić, czy załadowane dane nie są prawdziwe, stąd wykrzyknik, a następnie wiem, że dane nie zostały jeszcze załadowane

67
00:06:11,880 --> 00:06:16,760
i tak jest początkowo w tym przypadku, w tym przypadku nie będę nawet

68
00:06:16,920 --> 00:06:17,580
kontynuował

69
00:06:17,640 --> 00:06:25,170
mojej innej logiki , zamiast tego dla tego funkcjonalnego komponentu, natychmiast zwrócę komponent AppLoading jako treść aplikacji zasadniczo, ponieważ nie

70
00:06:25,170 --> 00:06:32,340
chcę renderować żadnej innej zawartości, jeśli nadal ładujemy nasze dane.

71
00:06:32,340 --> 00:06:40,740
Teraz AppLoading jest komponentem pochodzącym z Expo, który przyjmuje startową asynchroniczną rekwizyt, w którym wskazujemy operację, którą chcemy rozpocząć, gdy

72
00:06:40,740 --> 00:06:46,200
jest ona renderowana po raz pierwszy, i to oczywiście nasza funkcja pobierania czcionek.

73
00:06:46,200 --> 00:06:49,480
Więc tutaj wskazuję na pobieranie czcionek, na tę funkcję.

74
00:06:49,500 --> 00:06:51,290
Teraz ważne: a) musi

75
00:06:51,630 --> 00:06:57,420
to być funkcja, którą tutaj przekazujesz, i b) musi to być funkcja, która

76
00:06:57,700 --> 00:07:01,980
zwraca obietnicę, ponieważ expo automatycznie wysłucha tej obietnicy i gdy

77
00:07:01,980 --> 00:07:09,240
obietnica się rozwiąże, będzie wiedział, że ładowanie jest zrobione, a następnie zadzwoni na cokolwiek przekażesz tutaj

78
00:07:09,240 --> 00:07:10,770
do onFinish.

79
00:07:10,770 --> 00:07:17,530
Tutaj musisz przekazać funkcję, która następnie ustawia ładowane dane na wartość true.

80
00:07:17,610 --> 00:07:23,160
Ta funkcja zostanie tutaj wykonana, gdy ta operacja zostanie wykonana, i aby expo dowiedział

81
00:07:23,160 --> 00:07:24,120
się, kiedy

82
00:07:24,120 --> 00:07:27,360
to zostanie wykonane, powinno to zwrócić obietnicę.

83
00:07:27,380 --> 00:07:33,760
Więc teraz te dwa rekwizyty będą działać razem i aktualizujemy załadowane dane, ten stan jest prawdziwy i

84
00:07:33,760 --> 00:07:39,410
dlatego nie renderujemy tej zawartości, ale kontynuujemy wykonywanie tego kodu i ostatecznie renderowanie zawartości tam, gdy

85
00:07:39,410 --> 00:07:40,760
pobieranie naszych czcionek

86
00:07:41,060 --> 00:07:47,810
jest zakończone, a ty można tutaj wykonać dowolną operację asynchroniczną, ale zwykle ładuje się niektóre zasoby, takie jak

87
00:07:47,810 --> 00:07:50,690
czcionki lub cokolwiek podobnego, przy użyciu AppLoading, więc

88
00:07:50,750 --> 00:07:56,030
zasoby, które powinny tam być, gdy aplikacja się uruchomi, które są potrzebne natychmiast i

89
00:07:56,030 --> 00:07:57,770
zwykle są to czcionki.

90
00:07:57,870 --> 00:08:05,710
Nawiasem mówiąc, teraz możesz dodać tutaj procedurę obsługi onError, a tutaj po prostu konsolę zarejestruję obiekt błędu,

91
00:08:05,710 --> 00:08:07,050
który również

92
00:08:07,300 --> 00:08:14,470
otrzymujemy w przypadkach, gdy ładowanie się nie powiedzie. Oczywiście możesz nie tylko tego zalogować, ale zamiast tego zrobić coś

93
00:08:14,470 --> 00:08:16,570
innego, wyświetlić alternatywne treści w swojej

94
00:08:16,570 --> 00:08:20,230
aplikacji, coś w tym rodzaju. Tutaj po prostu to zarejestruję,

95
00:08:20,230 --> 00:08:25,710
ponieważ to nie powinno zawieść, czcionki są dostępne lokalnie tutaj, więc można je ładować bez problemów.

96
00:08:25,760 --> 00:08:31,330
Teraz, jeśli to zapiszemy, nasza aplikacja oczywiście uruchomi się ponownie i nie zauważymy tutaj żadnej różnicy,

97
00:08:31,400 --> 00:08:36,380
nasz ekran ładowania również nie potrwa dłużej niż wcześniej, ponieważ ładowanie jest super szybkie, po

98
00:08:36,380 --> 00:08:37,820
prostu nie dzieje

99
00:08:37,820 --> 00:08:39,830
się natychmiast, dlatego potrzebowaliśmy to podejście.

100
00:08:39,830 --> 00:08:41,240
Ale teraz załadowaliśmy

101
00:08:41,240 --> 00:08:43,440
czcionki, jak możemy ich teraz używać?

102
00:08:43,460 --> 00:08:48,980
Powiedzmy, że chcemy zmienić nasz nowy tytuł gry, aby używać naszej czcionki. Teraz musimy przejść do ekranu

103
00:08:48,980 --> 00:08:57,390
startowego gry, w którym ten tytuł mieszka na końcu, tutaj, rozpocząć nową grę, ma styl tytułowy, a

104
00:08:57,390 --> 00:09:03,540
zatem w arkuszu stylów tutaj w tytule, możemy teraz ustawić rodzina czcionek,

105
00:09:03,630 --> 00:09:08,050
aby zmienić rodzinę czcionek i ustawić ją na

106
00:09:08,050 --> 00:09:09,270
przykład na

107
00:09:09,270 --> 00:09:15,180
open-sans-bold, a oczywiście używany tutaj identyfikator musi być identyfikatorem załadowanym tutaj.

108
00:09:15,210 --> 00:09:17,800
Więc tutaj mam open-sans-pogrubienie i open sans,

109
00:09:17,850 --> 00:09:25,180
mogę użyć tych dwóch identyfikatorów w moim kodzie w dowolnym miejscu aplikacji, gdy chcę przypisać niestandardową czcionkę i

110
00:09:25,180 --> 00:09:27,240
właśnie to robię tutaj.

111
00:09:27,240 --> 00:09:32,940
Teraz widzisz, że ma inną czcionkę, która jest pogrubiona, a przy okazji, jeśli używasz niestandardowych

112
00:09:32,940 --> 00:09:36,180
czcionek i chcesz pogrubioną czcionkę, musisz załadować ją z

113
00:09:36,180 --> 00:09:42,180
rodziną czcionek, nie możesz ustawić jej grubości. React Native obsługuje to, ale w przypadku czcionek niestandardowych expo w

114
00:09:42,180 --> 00:09:42,840
tej chwili

115
00:09:42,840 --> 00:09:47,790
nie obsługuje tego, zamiast tego musisz po prostu użyć oddzielnej rodziny czcionek, co nie jest tak naprawdę problemem.