1
00:00:02,150 --> 00:00:06,950
Teraz, gdy dodano nasze niestandardowe czcionki, jesteśmy w stanie używać ich w naszej

2
00:00:06,950 --> 00:00:12,740
aplikacji i chcę ich używać we wszystkich miejscach, w których wyświetlamy niektóre teksty, tak jak

3
00:00:13,130 --> 00:00:17,410
tutaj, gdy wybrano, tutaj zgadują przeciwnicy, a następnie również na stronie

4
00:00:17,410 --> 00:00:24,010
podsumowania, będzie to również celem tutaj w tej aplikacji, a ponadto, gdy gra się skończy, nie tylko chcę

5
00:00:24,020 --> 00:00:30,770
użyć naszej niestandardowej czcionki tutaj w tej grze na stronie, ale także chcę pokazać obraz, grę ponad obraz

6
00:00:30,830 --> 00:00:32,460
tutaj, więc to

7
00:00:32,510 --> 00:00:34,830
kolejna rzecz, nad którą chcę popracować.

8
00:00:34,850 --> 00:00:42,770
Pierwszym krokiem jest zastąpienie tego tekstu tutaj tekstem podstawowym, aby użyć czcionki, więc importuję tekst podstawowy z folderu składników

9
00:00:42,770 --> 00:00:49,970
i tam, z tekstu podstawowego, a następnie zastępuję wszystkie te elementy tekstowe tutaj tekstem podstawowym, tak

10
00:00:49,970 --> 00:00:54,200
aby podczas gry się skończyło, używamy niestandardowej czcionki, to jest

11
00:00:54,200 --> 00:00:55,450
cel tutaj.

12
00:00:55,730 --> 00:00:57,950
Ale tak jak powiedziałem tylko

13
00:00:57,950 --> 00:01:03,200
jedno, najważniejsze, co powinno się tutaj zdarzyć, to to, że mamy tutaj obraz.

14
00:01:03,260 --> 00:01:11,360
Powiedzmy, że nasza gra jest już nad tytułem, więc użyjmy tutaj tekstu tytułowego, może teraz, gdy

15
00:01:11,360 --> 00:01:12,350
o

16
00:01:12,530 --> 00:01:16,460
tym myślę, zamiast tekstu tytułowego, ale pod tym

17
00:01:16,460 --> 00:01:19,830
tytułem, a więc poniżej gry, koniec wizerunek.

18
00:01:19,880 --> 00:01:27,740
Więc tutaj chcę użyć jakiegoś komponentu, który faktycznie pozwala nam wyświetlić obraz, a React

19
00:01:27,800 --> 00:01:36,470
Native ma taki komponent, ma komponent obrazu. Możemy użyć tutaj obrazu jako normalnego komponentu w naszym

20
00:01:36,470 --> 00:01:43,490
kodzie jsx, podobnie jak samozamykającego się elementu, obraz ma jeden ważny rekwizyt, który jest rekwizytem

21
00:01:43,490 --> 00:01:51,170
źródłowym i rekwizytem źródłowym, jak sugeruje nazwa, musi wskazywać na obraz, a teraz są dwa rodzaje obrazów,

22
00:01:51,170 --> 00:01:58,430
których możesz użyć - obrazy lokalne, które wysyłasz jako część aplikacji, więc które umieszczasz w kodzie

23
00:01:58,430 --> 00:02:05,600
źródłowym, w pakiecie aplikacji na końcu lub obrazy sieciowe, a my będziemy mieć spójrz na oba.

24
00:02:05,610 --> 00:02:14,280
Teraz zacznijmy od lokalnego wizerunku i w tym celu odnosicie sukces. plik png, który możesz przeciągnąć do folderu zasobów, więc nie

25
00:02:14,280 --> 00:02:17,000
w folderze czcionek, ale tylko

26
00:02:17,370 --> 00:02:23,430
w zasobach lub możesz utworzyć podfolder obrazów, jeśli chcesz, to nie ma znaczenia,

27
00:02:23,430 --> 00:02:24,240
będę

28
00:02:24,270 --> 00:02:25,150
go miał

29
00:02:25,170 --> 00:02:31,550
tutaj w zasobach , to ten sukces. plik png i to jest plik, którego

30
00:02:31,560 --> 00:02:39,480
chcę tutaj użyć, więc obraz, który chcę tutaj wyrenderować. Teraz, aby wyrenderować ten obraz tutaj, używamy specjalnej składni, która może

31
00:02:39,660 --> 00:02:46,040
wyglądać dziwnie za pierwszym razem, gdy go zobaczysz. Użyłeś tej wymaganej funkcji, która jest wbudowana w

32
00:02:46,050 --> 00:02:52,440
JavaScript lub która jest obsługiwana przez React Native w Javascript powiedzmy, gdzie przekazujesz ciąg jako argument, a jest

33
00:02:53,010 --> 00:02:57,840
to ciąg wskazujący na obraz i powinna to być ścieżka względna, więc tutaj,

34
00:02:57,840 --> 00:02:59,240
ponieważ jesteśmy w

35
00:02:59,250 --> 00:03:04,530
folderze ekranów, musimy przejść o jeden poziom wyżej, następnie do folderu zasobów, a następnie

36
00:03:04,530 --> 00:03:07,450
tutaj możemy wskazać sukces. png,

37
00:03:07,470 --> 00:03:09,090
właśnie tak.

38
00:03:09,150 --> 00:03:14,490
Teraz mówi to React Native, że chcemy użyć tego obrazu tutaj i za

39
00:03:14,490 --> 00:03:20,190
kulisami, pozwala to React Native skutecznie załadować to, a także spojrzeć na obraz i

40
00:03:20,430 --> 00:03:21,340
na przykład

41
00:03:21,360 --> 00:03:28,830
określić jego szerokość i wysokość, dlatego używamy tego dziwnego wymagają składni i musimy załadować lokalne obrazy w ten sposób.

42
00:03:30,010 --> 00:03:32,280
Teraz, aby

43
00:03:32,410 --> 00:03:39,400
zobaczyć wynik, poprawię aplikację. Plik js tymczasowo, aby upewnić się, że zawsze wyświetlamy tam grę na

44
00:03:39,400 --> 00:03:46,060
ekranie, po prostu dlatego, że nie zawsze muszę przechodzić przez cały ekran, tylko po to, aby sprawdzić, czy został zaktualizowany, czy się zmienił.

45
00:03:46,660 --> 00:03:53,590
Więc gra na ekranie jest tym, co tymczasowo wykorzystam jako moją główną treść tutaj od samego początku i po prostu przekażę fałszywe liczby

46
00:03:53,590 --> 00:03:57,850
liczb rund i numerów użytkowników, znowu robię to tylko po to, aby zacząć grę

47
00:03:57,880 --> 00:04:04,390
na ekranie tutaj i zobacz, co nam to daje. I widzimy, co to nam

48
00:04:04,480 --> 00:04:10,730
daje, daje nam w końcu obraz pełnoekranowy, naprawdę duży obraz.

49
00:04:10,780 --> 00:04:14,140
Powodem tego jest to, że obraz, który ci dałem, jest

50
00:04:14,200 --> 00:04:17,590
dość duży, ten sukces. plik png nie jest

51
00:04:17,710 --> 00:04:22,040
małym plikiem, jest to dość duży obraz dotyczący pikseli, jego szerokości i wysokości.

52
00:04:22,210 --> 00:04:29,320
I jak powiedziałem, kiedy używasz takiego wymagania, dobrą rzeczą jest to, że React Native patrzy na plik obrazu, określa jego szerokość

53
00:04:29,320 --> 00:04:34,020
i wysokość i używa tej samej szerokości i wysokości tutaj, co oznacza, że

54
00:04:34,020 --> 00:04:41,050
renderujemy ten ogromny obraz tutaj w aplikacji a wadą jest po prostu to, że teraz nie mieści się już na

55
00:04:41,050 --> 00:04:45,450
ekranie ani nie zajmuje całego ekranu, ponieważ jest to zbyt duży plik.

56
00:04:45,550 --> 00:04:50,440
Gdybyśmy mieli mniejszy obraz, nie byłby to problem, to po prostu zajmowałby część ekranu,

57
00:04:50,440 --> 00:04:54,160
ale ponieważ jest to duży obraz, zajmuje cały ekran.