Teraz mamy wygląd karty, teraz jako kolejną rzecz naprawmy przyciski i to jest coś, co już ci pokazałem,
więc zdecydowanie Twoja szansa, aby zatrzymać film i zrobić to sam.
Chcę się upewnić, że przyciski mają taki sam rozmiar, nie powinny zajmować pełnej dostępnej
szerokości, ale powinny mieć taki sam rozmiar, co zapewnia, że tekst się tam mieści i że mają
jednakowy rozmiar.
Twoja szansa na zatrzymanie filmu, potem zrobimy to razem. Czy ci się udało?
Upewnijmy się, że przyciski mają ten sam rozmiar, a do tego na ekranie startowym gry, gdzie
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,
a teraz możesz
przypisać styl do tych przycisków, więc do obu przycisków tutaj, a ja użyję obiektu przycisku w
obiekcie moich stylów tam, więc
dodajmy tutaj przycisk i po prostu podaj szerokość i tutaj, szerokość, którą wybiorę, powiedzmy 80.
Zobaczmy, jak to wygląda, jeśli to zapiszę, trochę za małe, jak się wydaje, ponieważ w tym przycisku występuje
przerwa w linii.
Przejdźmy więc do 120, teraz to z pewnością za dużo, więc co
powiesz na 100 i to wygląda dla mnie całkiem nieźle.
Dodatkowo, i to nie było zadanie dla użytkownika, nie martw się, jeśli
tego nie zrobiłeś, chcę zmienić ich kolory, a jeden z kolorów powinien być naszym
głównym kolorem, a także chcę ustawić trochę akcentu, trochę kolory wtórne, żeby powiedzieć, które możemy użyć.
Tak więc z powrotem w komponencie ekranu startowego gry, na samym przycisku, znajduje się prop kolor,
który możesz ustawić, aby
kontrolować kolor, a dla Androida, to kolor tła, dla iOS, który będzie kolorem tekstu, a
teraz reset przycisk, tam chcę ustawić kolor # 717fc, to jest ładny kolor,
myślę, a dla głównego przycisku,
przycisku potwierdzenia, użyję mojego głównego motywu i chcę użyć tego samego koloru, którego używam w
nagłówku .
Więc mam ten kod szesnastkowy użyty jako kolor tła, użyję
teraz tego samego koloru dla tego drugiego przycisku. Dzięki temu możemy to zapisać i
teraz mamy te dwa kolory przycisków, które moim zdaniem wyglądają całkiem ładnie.
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
w nagłówku i są szanse, że później w aplikacji będziemy chcieli
używać tego samego koloru również w innych miejscach .
Byłoby miło, gdybyśmy mogli ustawić ten rodzaj motywu, który można powiedzieć,
ż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ż
zmienić kolor w jednym miejscu, jeśli kiedykolwiek chcemy użyj innego koloru i nie
musimy tego robić w dziesiątkach komponentów.
I do tego użyję podejścia, w którym dodam nowy folder na poziomie głównym i nadam mu
stałe i jak zawsze, możesz nazwać te foldery, jak chcesz
i tam chcę mieć kolory. plik js. Znowu tę nazwę można
nazwać, jak chcesz, ponieważ ten plik zrobi to, że wyeksportuje domyślny obiekt JavaScript, wyeksportuje obiekt Javascript, a
tam możesz mieć dowolne pary klucz-wartość, a ja ustawię w górę podstawowy kolor, więc po prostu podstawowy jako
nazwa klucza i powinien to być ten kod szesnastkowy, który właśnie skopiowałem, więc ten
kolor nagłówka również akcentujący lub wtórny, cokolwiek chcesz nazwać,
wybiorę kolor akcentujący i to powinno być innym kolorem, którego użyłem
na pierwszym przycisku, więc ten kod szesnastkowy tutaj, użyję go tutaj.
Teraz te kolory są zdefiniowane tutaj i możemy teraz po prostu zaimportować je z tego pliku i za każdym razem,
gdy je zmieniamy, zmieniają się one wszędzie w tej aplikacji i dlatego możemy łatwo zamienić to podczas programowania.
Teraz na ekranie gry startowej możemy po prostu zaimportować kolory ze stałych / kolorów takich jak ten, a ja nadałem
temu duże C, aby wskazać, że jest to zbiór wartości, możesz nazwać to, co chcesz, możesz również
użyć małej
litery c, że nazewnictwo nie ma znaczenia, a
teraz możesz użyć kolorów tutaj, aby przypisać kolory.
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
przycisku potwierdzenia, pójdę z kolorami. podstawowy i taki sam
w nagłówku. Oczywiście, teraz chcemy również użyć tego koloru, a
nie zakodować go tutaj, zamiast importować kolory ze stałych / kolorów, a po zaimportowaniu możesz również użyć tego w arkuszu
stylów, nie tylko w jsx, możesz go używać w dowolnym miejscu w końcu w
tym pliku, więc teraz
będę odwoływał się do kolorów. podstawowy. A jeśli to zapiszesz, znowu
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ć
tego koloru, ale powinien być niebieski, po prostu zamień go tutaj, twoja aplikacja jest przebudowany i masz niebieski przycisk.
Jest to więc ogromna zaleta zarządzania kolorami lub innymi stałymi rdzeni w takich plikach, możesz mieć inny
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
marginesów lub wypełnienia, dzięki czemu nie musisz ręcznie używać tych samych wartości w kółko, są to
wszystkie metody, które
możesz zastosować, aby ułatwić sobie życie jako programista i mieć kod, w którym
możesz szybko zamieniać wartości, jeśli zajdzie taka potrzeba.
Na razie zajmę się tylko zarządzaniem kolorami, ponieważ jest to jedna z najbardziej denerwujących rzeczy
do skopiowania i jest to naprawdę świetne podejście do zarządzania nimi w takim pliku.