1
00:00:02,320 --> 00:00:08,220
Teraz z tym obrazem dodanym i teraz, gdy już pracujemy nad grą na ekranie,

2
00:00:08,230 --> 00:00:11,280
dopracujmy ten tekst, który widzimy tutaj

3
00:00:11,280 --> 00:00:15,640
na dole, sprawmy, by był trochę ładniejszy, trochę piękniejszy, a ponadto

4
00:00:15,760 --> 00:00:21,400
przed Robię to, w rzeczywistości przestawię się z używania obrazu sieciowego na obraz lokalny,

5
00:00:21,400 --> 00:00:24,850
ale to oczywiście zależy od ciebie, co wolisz.

6
00:00:24,850 --> 00:00:29,890
Więc chcę pracować nad tekstem tutaj i zamiast po prostu mieć tutaj taki tekst

7
00:00:29,930 --> 00:00:32,560
tabelaryczny, który po prostu podaje nudne informacje, dlaczego

8
00:00:32,560 --> 00:00:37,460
nie zaprezentujemy tego w ładniejszy sposób? Mówiąc dokładniej, myślę, że byłoby lepiej,

9
00:00:37,600 --> 00:00:43,030
gdybyśmy mieli tutaj tekst czytelny dla człowieka, a więc prawdziwe zdanie, które możemy przeczytać.

10
00:00:43,400 --> 00:00:52,720
Więc możemy powiedzieć, że twój telefon jest potrzebny, a następnie mamy liczbę rund, rund, aby odgadnąć liczbę i

11
00:00:52,800 --> 00:00:55,140
że tutaj wprowadzimy liczbę.

12
00:00:55,240 --> 00:00:59,810
Tak więc liczba jest oczywiście numerem użytkownika rekwizytów i znowu możesz pozbyć się tej linii

13
00:00:59,950 --> 00:01:05,260
teraz, ale nie chcę tylko wyświetlać numeru użytkownika rekwizytów w ten sposób, zamiast tego chcę go podświetlić,

14
00:01:05,260 --> 00:01:11,680
chcę nadać mu specjalny kolor to różni się od innego koloru tutaj i tutaj jest takie samo dla rund, więc rekwizyty

15
00:01:11,690 --> 00:01:19,480
podają liczbę wartości, byłoby miło, gdyby to również miało inny kolor. Teraz, aby pokolorować to inaczej, możemy

16
00:01:19,480 --> 00:01:28,150
owinąć to tutaj w innym węźle tekstowym. Możesz więc mieć węzły tekstowe, komponenty tekstowe

17
00:01:28,150 --> 00:01:32,920
wewnątrz tekstu, wewnątrz innych komponentów tekstowych, więc

18
00:01:32,920 --> 00:01:36,820
jest to możliwe, właśnie tak.

19
00:01:36,820 --> 00:01:38,970
To naprawdę ważne, aby

20
00:01:38,970 --> 00:01:45,790
zrozumieć, możesz zagnieżdżać komponenty tekstowe w innych komponentach tekstowych i pamiętać, że tekst podstawowy to po

21
00:01:45,790 --> 00:01:51,080
prostu komponent tekstowy, tekst podstawowy to komponent, który po prostu zwraca wbudowany

22
00:01:51,160 --> 00:01:57,100
komponent tekstowy, więc cokolwiek wpisywanie między tekstem jest takie samo, jakbyśmy wprowadzali go między

23
00:01:57,100 --> 00:02:03,430
wbudowanymi komponentami tekstu, dlatego możemy tam zagnieżdżać tekst i teoretycznie możemy mieć tam również zagnieżdżone

24
00:02:03,430 --> 00:02:08,800
widoki, ale są pewne zastrzeżenia, a zatem jeśli nie ma absolutnie żadnego silnego

25
00:02:08,800 --> 00:02:14,370
powodu, dla którego potrzebowałbyś tam widoku, tak naprawdę nie powinieneś zagnieżdżać widoków w

26
00:02:14,370 --> 00:02:20,020
tekście i rzadko jest ku temu powód. Tekst w tekście może jednak

27
00:02:20,020 --> 00:02:25,310
mieć sens, ponieważ pozwala stylizować części tekstu inaczej niż reszta tekstu.

28
00:02:25,360 --> 00:02:32,970
Więc tutaj na przykład chcę dodać styl do stylów. wyróżnij i to samo tutaj dla drugiego tekstu,

29
00:02:33,210 --> 00:02:40,170
aby podświetlić tę część tekstu, a teraz oczywiście możemy dodać wyróżnienie w naszym arkuszu stylów w

30
00:02:40,170 --> 00:02:48,510
grze nad ekranem, wyróżnić i tam na przykład nadać temu kolor, w którym używamy kolorów i w tym celu musimy

31
00:02:48,530 --> 00:02:55,010
dodać import, w którym importujemy kolory ze stałych / kolorów, a następnie może użyć tam

32
00:02:55,010 --> 00:03:02,420
naszego podstawowego koloru, więc kolorów. podstawowy. Jeśli to zrobimy, zobaczysz to teraz, to jest podświetlone.

33
00:03:03,440 --> 00:03:09,350
Teraz także coś interesującego, jeśli chwilowo przejdę do tekstu podstawowego i zmienię go

34
00:03:09,350 --> 00:03:10,210
na

35
00:03:10,490 --> 00:03:17,150
otwarty bez pogrubienia tutaj, więc używam pogrubionej wersji, zobaczysz, że nawet ten podświetlony tekst jest nadal

36
00:03:17,150 --> 00:03:23,570
pogrubiony, może być trochę trudny do zobaczenia ale w rzeczywistości jest to odważne i bardzo

37
00:03:23,870 --> 00:03:30,860
interesujące, ponieważ we wcześniejszej części kursu wspomniałem, że twoje style nie dziedziczą, więc jeśli na przykład

38
00:03:30,860 --> 00:03:39,170
w grze na ekranie ustawisz tutaj rodzinę czcionek, która zostanie zastosowana do widok, który otacza wszystko, ta rodzina czcionek nie

39
00:03:39,470 --> 00:03:42,970
byłaby przekazywana do komponentów zagnieżdżonych w tym widoku.

40
00:03:42,980 --> 00:03:48,490
Więc to, że ustawiłeś styl tutaj w tym widoku, nie oznacza, że wszystkie inne widoki w nim lub wszystkie inne

41
00:03:48,490 --> 00:03:54,080
tam zawarte teksty, cokolwiek to jest, otrzymają te same style. Style stosowane do komponentu zawsze są

42
00:03:54,080 --> 00:04:00,780
po prostu stosowane do tego komponentu, a nie do komponentów zagnieżdżonych, a jednak są różne dla tekstu.

43
00:04:00,780 --> 00:04:09,050
Tam, ten tekst tutaj, podświetlony tekst, który jest zagnieżdżony wewnątrz tekstu podstawowego, również otrzymuje tę śmiałą rodzinę, jeśli zmienimy go na tekst podstawowy

44
00:04:09,260 --> 00:04:10,160
i jest

45
00:04:10,250 --> 00:04:16,550
to po prostu ważna różnica, jaką ma React Native. W przypadku komponentów tekstowych, jeśli dodasz

46
00:04:16,580 --> 00:04:17,720
tam

47
00:04:17,720 --> 00:04:23,900
styl, styl jest przekazywany do zagnieżdżonych komponentów tekstowych, jest to jeden

48
00:04:23,900 --> 00:04:29,750
wyjątek, jaki ma React Native. Tekst w tekście otrzymuje styl zdefiniowany

49
00:04:29,750 --> 00:04:37,610
w tekście zewnętrznym, więc każdy styl ustawiony tutaj w tekście podstawowym jest automatycznie odbierany przez zagnieżdżone komponenty tekstu.

50
00:04:37,680 --> 00:04:43,800
Istnieje jedno dodatkowe ważne zachowanie dotyczące komponentu tekstowego w React Native, a mianowicie to, że nie

51
00:04:43,800 --> 00:04:47,370
korzysta on z Flexboksa. Widok używa Flexboksa,

52
00:04:47,370 --> 00:04:52,110
komponent tekstowy oczywiście nie i wspominałem o tym wcześniej, że komponent

53
00:04:52,320 --> 00:05:00,180
widoku używa Flexboksa nie tekstu ani innych komponentów, ale tekst używa własnego systemu pozycjonowania, w którym automatycznie zawija się

54
00:05:00,210 --> 00:05:05,580
w nową linię, jeśli nie „ Aby zmieścić się w jednej linii i

55
00:05:05,580 --> 00:05:12,810
aby to zademonstrować, możemy przejść do gry na ekranie i owinąć cały tekst tutaj u dołu w

56
00:05:12,810 --> 00:05:21,180
inny widok, więc weź ten tekst i dodaj go tutaj w tym widoku i tam, dodaj styl powiedzmy nazwij to

57
00:05:21,210 --> 00:05:28,080
wynikowy tekst, cokolwiek chcesz nazwać lub kontener wynikowy, aby był bardziej zgodny z innymi nazwami stylów.

58
00:05:28,170 --> 00:05:30,410
Tak więc kontener wyników jest

59
00:05:30,570 --> 00:05:38,300
dodawany do widoku i teraz, jeśli dodam to tutaj, gdziekolwiek tutaj w moim arkuszu stylów, i podam tę szerokość, powiedzmy

60
00:05:38,550 --> 00:05:42,420
80%, co ma sens, aby tekst miał nieco większą odległość

61
00:05:42,480 --> 00:05:49,980
od lewej i prawej lub alternatywnie dodaję margines poziomy, powiedzmy 20, aby mieć pewne odstępy w lewo i prawo wokół

62
00:05:49,980 --> 00:05:55,980
kontenera, wtedy zobaczysz, że tekst jest rzeczywiście zawinięty w nową linię, a to także domyślne

63
00:05:55,980 --> 00:05:58,410
zachowanie komponentu tekstowego w React Native.

64
00:05:58,410 --> 00:06:05,700
Nie tylko analizuje style do tekstu zagnieżdżonego, ale ma także własny system pozycjonowania lub własny układ, w którym tekst

65
00:06:05,700 --> 00:06:10,950
automatycznie zawija się w nową linię, jeśli nie mieści się w tej samej

66
00:06:11,040 --> 00:06:16,830
linii, i ta sama linia, i to oczywiście robi dużo sensownie, zwykle jest to,

67
00:06:17,070 --> 00:06:24,920
co chcesz w tekście, chcesz zawinąć w nowe linie. Teraz z tym przywrócę to ustawienie w tekście,

68
00:06:24,920 --> 00:06:25,880
właściwie

69
00:06:25,880 --> 00:06:28,190
nie użyję tam pogrubionego sansa,

70
00:06:28,310 --> 00:06:34,530
po prostu używam otwartego sansa, ale chciałem pokazać to dziedziczenie stylu i oczywiście

71
00:06:34,580 --> 00:06:38,960
ogólnie wiedzieć, jak zachowuje się tekst pod względem układu.

72
00:06:38,960 --> 00:06:41,450
Wszystko, co zostało powiedziane o tekście,

73
00:06:41,480 --> 00:06:43,730
to jeszcze nie koniec, nie sądzę,

74
00:06:43,760 --> 00:06:49,860
że to wygląda tak ładnie, zamiast tego w grze na ekranie ten podświetlony tekst może być

75
00:06:50,100 --> 00:06:55,400
odważny, więc użyję rodziny czcionek otwartych -sans-pogrubienie tutaj, aby naprawdę się wyróżniało i

76
00:06:55,670 --> 00:07:02,930
było łatwiejsze do zobaczenia, a ponadto dodam tutaj margines poziomy 30, aby mieć nieco więcej odstępu od lewej do

77
00:07:02,930 --> 00:07:04,640
prawej wokół tekstu.

78
00:07:04,640 --> 00:07:10,490
Teraz dodatkowo chcę się upewnić, że tekst jest wyśrodkowany, aby w przypadku podziału linii

79
00:07:10,490 --> 00:07:17,090
był on wyśrodkowany na środku i nie zaczynaliśmy ponownie od lewej krawędzi, a teraz można to

80
00:07:17,090 --> 00:07:19,010
osiągnąć za pomocą specjalna

81
00:07:19,010 --> 00:07:21,760
właściwość stylizacji, którą można dodać do

82
00:07:21,790 --> 00:07:24,770
komponentów tekstowych, a jest to właściwość wyrównania tekstu.

83
00:07:25,070 --> 00:07:29,210
Chodzi o to, że nie chcę tego używać w tekście wyróżnienia, chcę

84
00:07:29,210 --> 00:07:34,990
używać tego w całym tekście głównym, dlatego musimy tutaj dodać styl, być może tekst wynikowy jest

85
00:07:35,000 --> 00:07:38,460
tutaj odpowiedni, ponieważ jest to nasz tekst ogólny, a następnie

86
00:07:38,660 --> 00:07:40,760
tutaj możemy po prostu dodać

87
00:07:44,450 --> 00:07:45,400
tekst wynikowy

88
00:07:45,410 --> 00:07:49,150
i na tym wyniku tekstowym ustawić tekst wyrównać do środka.

89
00:07:49,220 --> 00:07:56,570
Jednak jeśli to zapiszę, nie będzie to miało żadnego efektu, ponieważ nasz tekst nie jest skonfigurowany do uwzględnienia stylu,

90
00:07:56,630 --> 00:08:02,660
prop stylu, który możemy do niego dodać. W tekście głównym jedynym stylem ustawionym na tekst

91
00:08:02,660 --> 00:08:04,660
jest styl zdefiniowany wewnętrznie.

92
00:08:04,670 --> 00:08:09,080
Teraz dowiedzieliśmy się, jak to zmienić, po prostu przekazujemy tutaj obiekt

93
00:08:09,080 --> 00:08:16,170
do stylu, pobieramy wszystkie nasze niestandardowe właściwości stylu z tego pliku i dystrybuujemy je do tego obiektu i łączymy

94
00:08:16,170 --> 00:08:20,670
to z tym, co otrzymujemy w stylu rekwizytów, za pomocą operatora rozkładania

95
00:08:20,670 --> 00:08:22,930
tu też. I dzięki temu,

96
00:08:22,940 --> 00:08:28,370
teraz, jeśli uratujemy to, zobaczymy, że jest to ładnie wyśrodkowane i jest to z pewnością nieco ładniejszy

97
00:08:28,550 --> 00:08:30,490
do czytania niż wcześniej, niż powiedziałem.

98
00:08:30,680 --> 00:08:37,070
Teraz, gdy już prawie skończyliśmy stylizować ten tekst, ostatnia rzecz, która wydaje mi się ładna tutaj, to

99
00:08:37,070 --> 00:08:41,490
to, że jeśli na tekście wynikowym również nieco zwiększymy rozmiar czcionki.

100
00:08:41,570 --> 00:08:47,990
Więc jeśli ustawimy tutaj rozmiar czcionki na 20, to może tak naprawdę duży i na

101
00:08:47,990 --> 00:08:55,700
pojemniku z wynikami, chcę też mieć margines w pionie 15, może mieć także odstępy na górze i na

102
00:08:55,700 --> 00:08:57,180
dole wokół tekstu.

103
00:08:57,320 --> 00:09:02,240
A teraz mamy grę na ekranie, która moim zdaniem nie wygląda źle i nauczyłeś

104
00:09:02,240 --> 00:09:07,520
się dużo o tym, jak działa tekst, więc jak możesz pracować z komponentem tekstowym w React Native.