1
00:00:02,470 --> 00:00:05,140
Teraz, gdy pracowaliśmy nad

2
00:00:05,140 --> 00:00:11,250
tekstem, możemy teraz wrócić do aplikacji. js i pozbyć się tej tymczasowej zmiany tutaj,

3
00:00:11,250 --> 00:00:12,100
gdzie

4
00:00:12,100 --> 00:00:17,350
zawsze pokazujemy grę na ekranie, nie chcemy już tego robić, zamiast tego chcemy zacząć

5
00:00:17,350 --> 00:00:24,790
od normalnego ekranu startowego gry, a oprócz tej zmiany, teraz również chcesz dokonać jednej dodatkowej regulacji i to jest ten

6
00:00:24,790 --> 00:00:25,720
przycisk rozpoczęcia gry.

7
00:00:25,810 --> 00:00:31,000
Używamy tutaj normalnego przycisku, co oczywiście możesz zrobić, ale czasami chcesz również stworzyć swój

8
00:00:31,000 --> 00:00:35,910
własny przycisk, chcesz mieć pełną kontrolę nad tym, jak wygląda twój przycisk, a do

9
00:00:36,130 --> 00:00:40,610
tego możesz oczywiście stworzyć swój własny i właśnie to zrobimy teraz.

10
00:00:40,950 --> 00:00:45,700
Dlatego w folderze komponentów dodam mój własny przycisk i możesz nazwać go

11
00:00:45,700 --> 00:00:46,390
tak,

12
00:00:46,390 --> 00:00:49,400
jak chcesz, możesz go nazwać przyciskiem, ale to

13
00:00:49,480 --> 00:00:56,740
już jest nazwa wbudowanego i chociaż możesz oczywiście nazwać swój to, aby uniknąć konfliktów lub pomyłek w nazwach,

14
00:00:56,740 --> 00:01:04,330
tutaj nadam nazwę mojemu przyciskowi, ponieważ będzie to mój główny, mój główny przycisk, którego używam do wielkich akcji w

15
00:01:04,330 --> 00:01:05,710
tej grze, takich

16
00:01:05,710 --> 00:01:07,480
jak rozpoczęcie nowej gry.

17
00:01:07,720 --> 00:01:12,730
Teraz jest tam nazwa pliku, oczywiście będziemy mieli zwykły komponent React,

18
00:01:12,730 --> 00:01:14,470
dlatego importujemy React.

19
00:01:14,590 --> 00:01:18,160
Importujemy tutaj widok, z pewnością potrzebujemy trochę tekstu,

20
00:01:18,160 --> 00:01:23,960
z pewnością potrzebujemy arkusza stylów z React Native w ten sposób, a

21
00:01:24,160 --> 00:01:29,990
następnie tutaj mamy główny składnik przycisku, który odbiera rekwizyty i który w końcu

22
00:01:29,990 --> 00:01:35,290
zwróci trochę jsx. Będziemy mieć obiekt stylów za pomocą Arkusza stylów. utwórz i

23
00:01:35,470 --> 00:01:39,310
jak zwykle wyeksportujemy nasz główny przycisk.

24
00:01:39,310 --> 00:01:42,100
A teraz pytanie brzmi: jak zbudować własny przycisk?

25
00:01:42,110 --> 00:01:48,640
Teraz może to wydawać się bardzo skomplikowane, ale tak naprawdę nie jest. Twój własny przycisk jest także połączeniem widoku i

26
00:01:48,640 --> 00:01:56,890
tekstu oraz bardzo ważnego, a także dotykalnego elementu, takiego jak dotykowe podświetlenie lub dotykowe krycie lub dotykalne natywne sprzężenie

27
00:01:56,890 --> 00:02:01,300
zwrotne, a nawet dotykowe bez sprzężenia zwrotnego, jeśli nie chcesz

28
00:02:01,360 --> 00:02:06,940
udzielać żadnych wizualnych informacji zwrotnych. Więc tutaj przejdę do dotykowego krycia i

29
00:02:06,940 --> 00:02:13,690
potrzebujemy tego, aby przekazać użytkownikowi informację zwrotną o tym, że przycisk został naciśnięty i zarejestrować zdarzenie onPress

30
00:02:14,320 --> 00:02:19,720
i inne, po prostu zbudujemy nasz przycisk z widokiem, który stylizowaliśmy w określony sposób

31
00:02:19,720 --> 00:02:21,370
i tam tekst.

32
00:02:21,370 --> 00:02:29,330
Tak więc teraz tutaj, w przycisku głównym, możemy zwrócić naszą dotykową nieprzezroczystość, a tam mamy widok, którego możemy użyć, aby następnie stylizować

33
00:02:29,330 --> 00:02:34,120
przycisk, a tam może być tekst dla tekstu, który powinien mieć przycisk.

34
00:02:34,240 --> 00:02:39,680
Powiedzmy teraz, że nasz przycisk powinien nadawać się do użytku, tak abyśmy przekazali

35
00:02:39,680 --> 00:02:41,600
tekst bezpośrednio między otwierającymi

36
00:02:41,600 --> 00:02:46,030
i zamykającymi tagami naszego komponentu, stąd tutaj możemy użyć podrzędnych

37
00:02:46,300 --> 00:02:55,990
elementów podrzędnych jako tekstu, który chcę pokazać na przycisku, a następnie tutaj, w tym widoku, I Będę miał styl, powiedzmy, przycisk stylów, w

38
00:02:55,990 --> 00:03:04,860
tym tekście wewnętrznym moglibyśmy mieć styl przycisku tekstowego stylów, a te nazwy zależą od ciebie, a na dotykowej przezroczystości dodam słuchacza onPress,

39
00:03:04,930 --> 00:03:07,920
a my Będę musiał coś tam zrobić.

40
00:03:09,000 --> 00:03:11,430
Więc teraz otrzymujemy szkielet naszego przycisku, teraz możemy

41
00:03:11,450 --> 00:03:13,700
zacząć dodawać do niego niektóre style.

42
00:03:13,790 --> 00:03:18,450
Teraz oczywiście możesz stylizować ten przycisk w dowolny sposób, mam tu na

43
00:03:18,470 --> 00:03:20,410
myśli pewien styl, który

44
00:03:20,420 --> 00:03:24,490
dodam, ale znowu zdecydowanie baw się tym i zastosuj własne style.

45
00:03:24,530 --> 00:03:30,620
Tak więc dla samego przycisku, który jest widokiem wokół tekstu, chcę nadać temu przyciskowi określony kolor tła,

46
00:03:30,620 --> 00:03:34,850
a Ty możesz również upewnić się, że można go ustawić z zewnątrz,

47
00:03:42,270 --> 00:03:48,960
możesz tu naprawdę być kreatywny. Będę tutaj kodować kolor na stałe, używając tutaj moich stałych kolorów. Więc zaimportuję kolory ze stałych

48
00:03:49,100 --> 00:03:55,710
/ kolorów, kolory takie jak ten, a następnie użyję kolorów podstawowy kolor, być może podstawowy kolor, taki.

49
00:03:55,790 --> 00:04:00,380
To jest kolor tła, jaki powinien mieć ten przycisk. Ponownie możesz również upewnić się, że ten

50
00:04:00,380 --> 00:04:04,090
styl jest ustawiany dynamicznie za pomocą jakiegoś rekwizytu, który dostajesz z zewnątrz, ale

51
00:04:04,160 --> 00:04:06,290
tutaj, tutaj go na stałe zakoduję.

52
00:04:06,290 --> 00:04:11,180
Oprócz tego przycisk powinien mieć trochę dopełnienia, aby tekst nie znajdował się

53
00:04:11,270 --> 00:04:13,130
bezpośrednio na krawędziach pojemnika

54
00:04:13,130 --> 00:04:19,310
przycisku, tak więc wokół pola wokół tekstu, ale jest trochę odstępów i możesz użyć tego samego

55
00:04:19,310 --> 00:04:22,590
wypełnienia we wszystkich kierunkach ale chcę użyć paddingu

56
00:04:22,640 --> 00:04:29,300
pionowego 12, więc nie tyle paddingu do góry i dołu i paddingu poziomego powiedzmy 30, czyli o

57
00:04:29,300 --> 00:04:32,550
wiele więcej padu po lewej i prawej stronie.

58
00:04:32,710 --> 00:04:36,830
To jest przycisk, teraz w tekście przycisku, jest też kolor bieli,

59
00:04:36,880 --> 00:04:41,500
który powinien dobrze wyglądać na naszym podstawowym kolorze, możesz również użyć czerni, ponieważ

60
00:04:41,500 --> 00:04:47,290
naszym głównym kolorem jest kolor, w którym, jak widać, zarówno biały, jak i czarny faktycznie działa,

61
00:04:47,410 --> 00:04:49,480
więc możesz użyć jednego z

62
00:04:49,480 --> 00:04:55,840
nich, ale wybiorę tutaj biały przycisk i dodam rodzinę czcionek open sans, aby również użyć tej niestandardowej czcionki,

63
00:04:55,840 --> 00:05:01,780
jak się dowiedziałeś, musisz to ustawić na każdy tekst, nie ma dziedziczenia, nie ma globalnej czcionki, którą

64
00:05:01,780 --> 00:05:07,150
można ustawić, każdy tekst, który powinien użyć tej czcionki, musi ją pobrać, a ja dodam

65
00:05:07,150 --> 00:05:15,840
rozmiar czcionki, powiedzmy 18, aby w tym przycisku był większy tekst . Teraz, kiedy przycisk jest wciśnięty, wtedy właściwie

66
00:05:15,840 --> 00:05:21,720
nie chcę zazwyczaj obsługiwać tego zdarzenia wciśnięcia wewnątrz przycisku, ale wewnątrz

67
00:05:21,720 --> 00:05:24,990
komponentu, w którym używamy przycisku.

68
00:05:25,110 --> 00:05:27,160
Więc po prostu chcę go

69
00:05:27,180 --> 00:05:33,330
przesłać i dlatego możemy po prostu spodziewać się odwołania do funkcji, funkcji obsługi zdarzeń na, powiedzmy,

70
00:05:33,330 --> 00:05:36,490
prop wniosku onPress naszego niestandardowego przycisku, ale można

71
00:05:36,510 --> 00:05:41,670
nazwać ten wniosek dowolnym, można go nazwać onClick, ponieważ w koniec, to

72
00:05:41,670 --> 00:05:42,510
ty

73
00:05:42,600 --> 00:05:48,540
używasz własnego przycisku i tam musisz tylko upewnić się, że przekazujesz odwołanie do funkcji dopasowania,

74
00:05:48,540 --> 00:05:54,310
wskaźnik dopasowania w funkcji obsługi zdarzeń do onPress lub jakkolwiek nazywasz ją własnym przyciskiem.

75
00:05:54,360 --> 00:05:55,680
Ta nazwa należy

76
00:05:55,680 --> 00:05:58,610
do ciebie, teraz użyjmy głównego przycisku i użyjmy

77
00:05:58,610 --> 00:06:02,170
go na ekranie startowym gry. Tam możemy go

78
00:06:02,190 --> 00:06:13,230
po prostu zaimportować, więc zaimportuj główny przycisk z komponentów / MainButton, a ten główny przycisk służy teraz do rozpoczęcia nowej

79
00:06:13,230 --> 00:06:14,170
gry.

80
00:06:14,230 --> 00:06:16,980
Zastąpię tutaj przycisk przyciskiem głównym, ale

81
00:06:16,980 --> 00:06:23,610
pamiętaj, że na tym przycisku skonfigurowałem treść, tekst do wyświetlenia, tak aby faktycznie była to

82
00:06:23,610 --> 00:06:31,440
treść przekazywana między otwierającymi i zamykającymi znacznikami naszego przycisku, a zatem z powrotem na ekranie gry początkowej tytuł

83
00:06:31,440 --> 00:06:32,790
nie jest

84
00:06:32,790 --> 00:06:38,760
już przekazywany na rekwizycie tytułowym, ale zamiast tego mamy teraz otwierający i zamykający znacznik

85
00:06:38,760 --> 00:06:42,730
dla naszego własnego przycisku i tam dodajemy grę początkową.

86
00:06:44,110 --> 00:06:50,170
Teraz onPress jest nadal rekwizytem, który tu zostawiamy, ponieważ w głównym przycisku przekazuję zdarzenie onPress,

87
00:06:50,230 --> 00:06:54,520
żeby tak powiedzieć, do funkcji, którą dostaję tutaj własną propozycję onPress,

88
00:06:54,520 --> 00:07:00,870
dlatego musimy ustawić prop onPress na własnym przycisku, a zatem dzięki temu powinniśmy mieć tutaj ładny

89
00:07:00,870 --> 00:07:04,500
główny przycisk, ładny przycisk, gdy rozpoczynamy nową grę.

90
00:07:07,840 --> 00:07:09,280
Spróbujmy tutaj, tak

91
00:07:09,310 --> 00:07:13,680
to wygląda i według mnie wygląda całkiem fajnie, ładny przycisk.

92
00:07:13,900 --> 00:07:15,080
Nie skończyłem

93
00:07:15,220 --> 00:07:19,360
jednak, chcę mieć zaokrąglone rogi na tym przycisku i w tym

94
00:07:19,360 --> 00:07:24,640
celu, w głównym pliku przycisku, możemy oczywiście po prostu przejść do tej właściwości

95
00:07:24,640 --> 00:07:32,650
przycisku tutaj w arkuszu stylów, który jest obiektem stylowym stosowanym do naszego zobacz i tam, możemy dodać promień obramowania o wartości

96
00:07:32,650 --> 00:07:39,210
25, a jeśli to zrobimy, zobaczysz, że jeśli teraz dostanę ten przycisk, to ma tutaj ładny wygląd.

97
00:07:39,450 --> 00:07:45,580
Możesz także pokazać go na Androidzie, który ma teraz zaokrąglone rogi i ma przyjemny efekt krycia, gdy go

98
00:07:45,580 --> 00:07:46,120
dotkniesz,

99
00:07:46,270 --> 00:07:51,680
a przy okazji, jak już wspomniano wcześniej, możesz zmienić ten efekt krycia, przechodząc do dotykalnego

100
00:07:51,730 --> 00:07:58,080
komponentu krycia i tam możesz ustaw aktywne krycie na poziom krycia, który chcesz mieć po naciśnięciu, na przykład,

101
00:07:58,120 --> 00:07:59,090
jeśli użyjesz

102
00:07:59,140 --> 00:08:04,040
tutaj raczej wysokiej wartości, to ten efekt jest mniej silny, teraz jest tylko nieznacznie

103
00:08:04,060 --> 00:08:10,930
przezroczysty, gdy go klikamy, a nie tak przezroczysty jak przed. Ale to zależy od

104
00:08:10,930 --> 00:08:11,980
ciebie,

105
00:08:11,980 --> 00:08:15,530
tutaj chcesz. 6 tutaj, aby uzyskać nieco

106
00:08:15,610 --> 00:08:21,130
silniejszy efekt, ale znowu to jest coś, co możesz skonfigurować i ogólnie rzecz biorąc, sugeruję, abyś bawił się tym i

107
00:08:21,130 --> 00:08:28,950
zobaczył, jak możesz stylizować ten przycisk, jak naprawdę możesz dostroić go do swoich wymagań. Teraz z dodanym przyciskiem niestandardowym chcę również używać

108
00:08:28,950 --> 00:08:31,140
go w grze na

109
00:08:31,140 --> 00:08:33,170
ekranie, więc tam

110
00:08:33,270 --> 00:08:42,380
też zaimportuję główny przycisk z komponentów / MainButton w ten sposób, a następnie po prostu dodam ten

111
00:08:42,610 --> 00:08:49,110
główny przycisk tutaj, gdy pokażemy nasz nowy przycisk gry tam na dole.

112
00:08:49,120 --> 00:08:53,620
Zamiast tego użyj przycisku głównego, dlatego usuń rekwizyt tytułowy, ponieważ nie w

113
00:08:53,620 --> 00:08:55,710
ten sposób ustawiamy tytuł na

114
00:08:55,720 --> 00:09:02,840
naszym własnym przycisku niestandardowym, zamiast tego musimy przekazać go tutaj między otwierającymi i zamykającymi tagami naszych niestandardowych tagów składowych.

115
00:09:03,040 --> 00:09:11,950
Dlatego teraz tutaj powinno to wyglądać ładniej, jeśli szybko zakończymy grę tutaj, starając się, aby komputer zgadł 33,

116
00:09:11,950 --> 00:09:13,540
oto jesteśmy i

117
00:09:17,550 --> 00:09:20,730
teraz widzimy tutaj również ładny przycisk.

118
00:09:20,730 --> 00:09:24,540
Widzimy tu również prawidłowy wynik dotyczący liczby rund i

119
00:09:24,540 --> 00:09:25,440
liczby,

120
00:09:25,440 --> 00:09:30,510
którą musieliśmy zgadnąć, i możemy rozpocząć nową grę później, a także przejść

121
00:09:36,440 --> 00:09:44,900
przez to bardzo szybko, tak, to wszystko wygląda naprawdę ładnie.

122
00:09:44,900 --> 00:09:46,520
Pozostaje mi teraz jeszcze tylko ochota pracować nad tymi dwoma przyciskami, dolnym i większym.

123
00:09:46,520 --> 00:09:48,230
Są trochę nudne, powiedziałbym,

124
00:09:48,290 --> 00:09:54,200
że z pewnością możemy sprawić, by wyglądały bardziej ekscytująco. Teraz jednym ze sposobów, aby wyglądały nieco bardziej

125
00:09:54,200 --> 00:09:56,690
ekscytująco, jest użycie naszego niestandardowego przycisku.

126
00:09:57,020 --> 00:10:04,710
Oczywiście tutaj, na ekranie gry, możemy również zaimportować główny przycisk z komponentów / MainButton, więc nasz własny

127
00:10:04,730 --> 00:10:09,650
przycisk niestandardowy i użyć go zamiast przycisku, którego obecnie używamy, który

128
00:10:09,660 --> 00:10:12,070
jest wbudowany. Więc użyj

129
00:10:12,200 --> 00:10:17,770
naszego własnego przycisku tutaj, dlatego oczywiście przenieś tytuł między tagami

130
00:10:17,870 --> 00:10:24,710
otwierającym i zamykającym, więc tutaj jest niższy, a następnie tutaj drugi przycisk, który jest

131
00:10:25,220 --> 00:10:31,610
większy, a teraz powinien wyglądać nieco ładniej, jeśli zaczniemy nową grę tutaj .

132
00:10:31,640 --> 00:10:35,470
Teraz używamy tutaj niestandardowych przycisków, chociaż teraz widzimy również problem, są

133
00:10:35,590 --> 00:10:39,440
one po prostu trochę za duże, są zbyt blisko siebie, możemy

134
00:10:39,530 --> 00:10:44,540
to zmienić, przechodząc do pojemnika z przyciskami i pozostawiając to trochę większa szerokość, może

135
00:10:44,540 --> 00:10:47,550
faktycznie ustaw tutaj maksymalną szerokość na 90%.

136
00:10:47,560 --> 00:10:53,490
Więc teraz, jeśli spróbujemy ponownie, tak, to wygląda trochę lepiej, między przyciskami jest co najmniej trochę odstępu

137
00:10:53,490 --> 00:10:58,380
i na razie to zrobi, ponieważ na razie nie optymalizujemy dla wszystkich rozmiarów ekranu.

138
00:10:58,530 --> 00:11:04,140
Zwiększmy również tę szerokość tutaj do 400, abyśmy mieli wystarczającą szerokość, faktycznie

139
00:11:04,140 --> 00:11:09,160
używamy 400 pikseli, a teraz wygląda to dobrze tutaj na iOS

140
00:11:12,590 --> 00:11:15,880
i na Androida. Teraz wygląda to trochę lepiej,

141
00:11:15,890 --> 00:11:22,700
jak wspomniałem, ale nie byłoby też miło, gdybyśmy mieli tam ikony zamiast tekstu, ponieważ tekst oczywiście działa, ale ikona może również załatwić

142
00:11:22,700 --> 00:11:24,650
sprawę i do tej pory nie

143
00:11:24,650 --> 00:11:30,830
korzystaliśmy z ikon często jednak potrzebujesz ich w aplikacjach mobilnych. Jest to z pewnością coś, o czym powinieneś

144
00:11:30,830 --> 00:11:36,980
również wiedzieć, powinieneś być świadomy tego, jak pracować z ikonami, jak dodawać ikony w swojej aplikacji

145
00:11:36,980 --> 00:11:39,370
i dlatego zrobimy to dalej.