1
00:00:02,260 --> 00:00:08,000
Teraz mamy wygląd karty, teraz jako kolejną rzecz naprawmy przyciski i to jest coś, co już ci pokazałem,

2
00:00:08,000 --> 00:00:11,860
więc zdecydowanie Twoja szansa, aby zatrzymać film i zrobić to sam.

3
00:00:11,870 --> 00:00:16,430
Chcę się upewnić, że przyciski mają taki sam rozmiar, nie powinny zajmować pełnej dostępnej

4
00:00:16,760 --> 00:00:22,070
szerokości, ale powinny mieć taki sam rozmiar, co zapewnia, że tekst się tam mieści i że mają

5
00:00:22,280 --> 00:00:22,990
jednakowy rozmiar.

6
00:00:23,000 --> 00:00:30,020
Twoja szansa na zatrzymanie filmu, potem zrobimy to razem. Czy ci się udało?

7
00:00:30,020 --> 00:00:35,480
Upewnijmy się, że przyciski mają ten sam rozmiar, a do tego na ekranie startowym gry, gdzie

8
00:00:35,480 --> 00:00:43,070
mam przyciski, dowiedziałeś się, że rozwiązaniem jest zawinięcie przycisków w widoku. Musisz więc dodać własny komponent widoku wokół przycisków,

9
00:00:43,220 --> 00:00:45,200
a teraz możesz

10
00:00:45,200 --> 00:00:52,670
przypisać styl do tych przycisków, więc do obu przycisków tutaj, a ja użyję obiektu przycisku w

11
00:00:52,670 --> 00:00:55,190
obiekcie moich stylów tam, więc

12
00:00:55,370 --> 00:01:02,730
dodajmy tutaj przycisk i po prostu podaj szerokość i tutaj, szerokość, którą wybiorę, powiedzmy 80.

13
00:01:02,750 --> 00:01:09,050
Zobaczmy, jak to wygląda, jeśli to zapiszę, trochę za małe, jak się wydaje, ponieważ w tym przycisku występuje

14
00:01:09,260 --> 00:01:10,370
przerwa w linii.

15
00:01:10,370 --> 00:01:16,890
Przejdźmy więc do 120, teraz to z pewnością za dużo, więc co

16
00:01:16,920 --> 00:01:22,510
powiesz na 100 i to wygląda dla mnie całkiem nieźle.

17
00:01:22,530 --> 00:01:26,790
Dodatkowo, i to nie było zadanie dla użytkownika, nie martw się, jeśli

18
00:01:26,910 --> 00:01:31,840
tego nie zrobiłeś, chcę zmienić ich kolory, a jeden z kolorów powinien być naszym

19
00:01:31,950 --> 00:01:37,590
głównym kolorem, a także chcę ustawić trochę akcentu, trochę kolory wtórne, żeby powiedzieć, które możemy użyć.

20
00:01:40,450 --> 00:01:46,810
Tak więc z powrotem w komponencie ekranu startowego gry, na samym przycisku, znajduje się prop kolor,

21
00:01:46,810 --> 00:01:48,530
który możesz ustawić, aby

22
00:01:48,550 --> 00:01:54,460
kontrolować kolor, a dla Androida, to kolor tła, dla iOS, który będzie kolorem tekstu, a

23
00:01:54,780 --> 00:02:00,250
teraz reset przycisk, tam chcę ustawić kolor # 717fc, to jest ładny kolor,

24
00:02:00,340 --> 00:02:02,170
myślę, a dla głównego przycisku,

25
00:02:02,170 --> 00:02:08,170
przycisku potwierdzenia, użyję mojego głównego motywu i chcę użyć tego samego koloru, którego używam w

26
00:02:08,170 --> 00:02:09,370
nagłówku .

27
00:02:09,370 --> 00:02:12,960
Więc mam ten kod szesnastkowy użyty jako kolor tła, użyję

28
00:02:13,030 --> 00:02:19,090
teraz tego samego koloru dla tego drugiego przycisku. Dzięki temu możemy to zapisać i

29
00:02:19,210 --> 00:02:24,050
teraz mamy te dwa kolory przycisków, które moim zdaniem wyglądają całkiem ładnie.

30
00:02:24,070 --> 00:02:30,660
Teraz jedną wadą tego podejścia lub jedną rzeczą, którą możemy poprawić, jest to, że używam tego kodu szesnastkowego tutaj, używam go

31
00:02:30,670 --> 00:02:34,080
w nagłówku i są szanse, że później w aplikacji będziemy chcieli

32
00:02:34,090 --> 00:02:37,330
używać tego samego koloru również w innych miejscach .

33
00:02:37,330 --> 00:02:41,380
Byłoby miło, gdybyśmy mogli ustawić ten rodzaj motywu, który można powiedzieć,

34
00:02:41,380 --> 00:02:48,340
że moglibyśmy z łatwością używać tych kolorów bez kopiowania kodów szesnastkowych w naszej aplikacji i że możemy również

35
00:02:48,340 --> 00:02:53,350
zmienić kolor w jednym miejscu, jeśli kiedykolwiek chcemy użyj innego koloru i nie

36
00:02:53,350 --> 00:02:55,980
musimy tego robić w dziesiątkach komponentów.

37
00:02:56,080 --> 00:03:01,830
I do tego użyję podejścia, w którym dodam nowy folder na poziomie głównym i nadam mu

38
00:03:01,840 --> 00:03:05,440
stałe i jak zawsze, możesz nazwać te foldery, jak chcesz

39
00:03:05,440 --> 00:03:11,640
i tam chcę mieć kolory. plik js. Znowu tę nazwę można

40
00:03:11,670 --> 00:03:19,020
nazwać, jak chcesz, ponieważ ten plik zrobi to, że wyeksportuje domyślny obiekt JavaScript, wyeksportuje obiekt Javascript, a

41
00:03:19,050 --> 00:03:26,760
tam możesz mieć dowolne pary klucz-wartość, a ja ustawię w górę podstawowy kolor, więc po prostu podstawowy jako

42
00:03:26,820 --> 00:03:32,790
nazwa klucza i powinien to być ten kod szesnastkowy, który właśnie skopiowałem, więc ten

43
00:03:32,790 --> 00:03:37,230
kolor nagłówka również akcentujący lub wtórny, cokolwiek chcesz nazwać,

44
00:03:37,230 --> 00:03:42,330
wybiorę kolor akcentujący i to powinno być innym kolorem, którego użyłem

45
00:03:42,330 --> 00:03:47,070
na pierwszym przycisku, więc ten kod szesnastkowy tutaj, użyję go tutaj.

46
00:03:47,070 --> 00:03:52,920
Teraz te kolory są zdefiniowane tutaj i możemy teraz po prostu zaimportować je z tego pliku i za każdym razem,

47
00:03:52,920 --> 00:03:58,700
gdy je zmieniamy, zmieniają się one wszędzie w tej aplikacji i dlatego możemy łatwo zamienić to podczas programowania.

48
00:03:58,740 --> 00:04:07,800
Teraz na ekranie gry startowej możemy po prostu zaimportować kolory ze stałych / kolorów takich jak ten, a ja nadałem

49
00:04:08,050 --> 00:04:15,720
temu duże C, aby wskazać, że jest to zbiór wartości, możesz nazwać to, co chcesz, możesz również

50
00:04:15,730 --> 00:04:16,900
użyć małej

51
00:04:16,900 --> 00:04:20,530
litery c, że nazewnictwo nie ma znaczenia, a

52
00:04:20,590 --> 00:04:23,980
teraz możesz użyć kolorów tutaj, aby przypisać kolory.

53
00:04:24,010 --> 00:04:31,570
Tak więc dla tego przycisku resetowania użyjemy teraz wartości dynamicznej, abyśmy mogli dotrzeć do kolorów. akcent i tutaj dla przycisku głównego, dla

54
00:04:32,050 --> 00:04:39,080
przycisku potwierdzenia, pójdę z kolorami. podstawowy i taki sam

55
00:04:39,080 --> 00:04:44,630
w nagłówku. Oczywiście, teraz chcemy również użyć tego koloru, a

56
00:04:45,020 --> 00:04:52,180
nie zakodować go tutaj, zamiast importować kolory ze stałych / kolorów, a po zaimportowaniu możesz również użyć tego w arkuszu

57
00:04:52,370 --> 00:04:57,680
stylów, nie tylko w jsx, możesz go używać w dowolnym miejscu w końcu w

58
00:04:57,680 --> 00:04:59,420
tym pliku, więc teraz

59
00:04:59,420 --> 00:05:05,680
będę odwoływał się do kolorów. podstawowy. A jeśli to zapiszesz, znowu

60
00:05:05,720 --> 00:05:13,460
będziemy wyglądać tak samo jak poprzednio, ale jeszcze raz w jeszcze bardziej elegancki sposób, jeśli kiedykolwiek zdecydujesz, że kolor akcentu nie powinien być

61
00:05:13,460 --> 00:05:19,790
tego koloru, ale powinien być niebieski, po prostu zamień go tutaj, twoja aplikacja jest przebudowany i masz niebieski przycisk.

62
00:05:19,910 --> 00:05:26,630
Jest to więc ogromna zaleta zarządzania kolorami lub innymi stałymi rdzeni w takich plikach, możesz mieć inny

63
00:05:26,630 --> 00:05:34,910
plik o nazwie tekst, na przykład, jeśli masz podstawowe rozmiary czcionek lub inny odstęp między plikami, w którym przechowujesz domyślne wartości

64
00:05:34,940 --> 00:05:41,000
marginesów lub wypełnienia, dzięki czemu nie musisz ręcznie używać tych samych wartości w kółko, są to

65
00:05:41,000 --> 00:05:42,550
wszystkie metody, które

66
00:05:42,620 --> 00:05:47,690
możesz zastosować, aby ułatwić sobie życie jako programista i mieć kod, w którym

67
00:05:47,690 --> 00:05:50,900
możesz szybko zamieniać wartości, jeśli zajdzie taka potrzeba.

68
00:05:50,990 --> 00:05:56,360
Na razie zajmę się tylko zarządzaniem kolorami, ponieważ jest to jedna z najbardziej denerwujących rzeczy

69
00:05:56,360 --> 00:06:01,490
do skopiowania i jest to naprawdę świetne podejście do zarządzania nimi w takim pliku.