Teraz, gdy pracowaliśmy nad
tekstem, możemy teraz wrócić do aplikacji. js i pozbyć się tej tymczasowej zmiany tutaj,
gdzie
zawsze pokazujemy grę na ekranie, nie chcemy już tego robić, zamiast tego chcemy zacząć
od normalnego ekranu startowego gry, a oprócz tej zmiany, teraz również chcesz dokonać jednej dodatkowej regulacji i to jest ten
przycisk rozpoczęcia gry.
Używamy tutaj normalnego przycisku, co oczywiście możesz zrobić, ale czasami chcesz również stworzyć swój
własny przycisk, chcesz mieć pełną kontrolę nad tym, jak wygląda twój przycisk, a do
tego możesz oczywiście stworzyć swój własny i właśnie to zrobimy teraz.
Dlatego w folderze komponentów dodam mój własny przycisk i możesz nazwać go
tak,
jak chcesz, możesz go nazwać przyciskiem, ale to
już jest nazwa wbudowanego i chociaż możesz oczywiście nazwać swój to, aby uniknąć konfliktów lub pomyłek w nazwach,
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
tej grze, takich
jak rozpoczęcie nowej gry.
Teraz jest tam nazwa pliku, oczywiście będziemy mieli zwykły komponent React,
dlatego importujemy React.
Importujemy tutaj widok, z pewnością potrzebujemy trochę tekstu,
z pewnością potrzebujemy arkusza stylów z React Native w ten sposób, a
następnie tutaj mamy główny składnik przycisku, który odbiera rekwizyty i który w końcu
zwróci trochę jsx. Będziemy mieć obiekt stylów za pomocą Arkusza stylów. utwórz i
jak zwykle wyeksportujemy nasz główny przycisk.
A teraz pytanie brzmi: jak zbudować własny przycisk?
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
tekstu oraz bardzo ważnego, a także dotykalnego elementu, takiego jak dotykowe podświetlenie lub dotykowe krycie lub dotykalne natywne sprzężenie
zwrotne, a nawet dotykowe bez sprzężenia zwrotnego, jeśli nie chcesz
udzielać żadnych wizualnych informacji zwrotnych. Więc tutaj przejdę do dotykowego krycia i
potrzebujemy tego, aby przekazać użytkownikowi informację zwrotną o tym, że przycisk został naciśnięty i zarejestrować zdarzenie onPress
i inne, po prostu zbudujemy nasz przycisk z widokiem, który stylizowaliśmy w określony sposób
i tam tekst.
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ć
przycisk, a tam może być tekst dla tekstu, który powinien mieć przycisk.
Powiedzmy teraz, że nasz przycisk powinien nadawać się do użytku, tak abyśmy przekazali
tekst bezpośrednio między otwierającymi
i zamykającymi tagami naszego komponentu, stąd tutaj możemy użyć podrzędnych
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
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,
a my Będę musiał coś tam zrobić.
Więc teraz otrzymujemy szkielet naszego przycisku, teraz możemy
zacząć dodawać do niego niektóre style.
Teraz oczywiście możesz stylizować ten przycisk w dowolny sposób, mam tu na
myśli pewien styl, który
dodam, ale znowu zdecydowanie baw się tym i zastosuj własne style.
Tak więc dla samego przycisku, który jest widokiem wokół tekstu, chcę nadać temu przyciskowi określony kolor tła,
a Ty możesz również upewnić się, że można go ustawić z zewnątrz,
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
/ kolorów, kolory takie jak ten, a następnie użyję kolorów podstawowy kolor, być może podstawowy kolor, taki.
To jest kolor tła, jaki powinien mieć ten przycisk. Ponownie możesz również upewnić się, że ten
styl jest ustawiany dynamicznie za pomocą jakiegoś rekwizytu, który dostajesz z zewnątrz, ale
tutaj, tutaj go na stałe zakoduję.
Oprócz tego przycisk powinien mieć trochę dopełnienia, aby tekst nie znajdował się
bezpośrednio na krawędziach pojemnika
przycisku, tak więc wokół pola wokół tekstu, ale jest trochę odstępów i możesz użyć tego samego
wypełnienia we wszystkich kierunkach ale chcę użyć paddingu
pionowego 12, więc nie tyle paddingu do góry i dołu i paddingu poziomego powiedzmy 30, czyli o
wiele więcej padu po lewej i prawej stronie.
To jest przycisk, teraz w tekście przycisku, jest też kolor bieli,
który powinien dobrze wyglądać na naszym podstawowym kolorze, możesz również użyć czerni, ponieważ
naszym głównym kolorem jest kolor, w którym, jak widać, zarówno biały, jak i czarny faktycznie działa,
więc możesz użyć jednego z
nich, ale wybiorę tutaj biały przycisk i dodam rodzinę czcionek open sans, aby również użyć tej niestandardowej czcionki,
jak się dowiedziałeś, musisz to ustawić na każdy tekst, nie ma dziedziczenia, nie ma globalnej czcionki, którą
można ustawić, każdy tekst, który powinien użyć tej czcionki, musi ją pobrać, a ja dodam
rozmiar czcionki, powiedzmy 18, aby w tym przycisku był większy tekst . Teraz, kiedy przycisk jest wciśnięty, wtedy właściwie
nie chcę zazwyczaj obsługiwać tego zdarzenia wciśnięcia wewnątrz przycisku, ale wewnątrz
komponentu, w którym używamy przycisku.
Więc po prostu chcę go
przesłać i dlatego możemy po prostu spodziewać się odwołania do funkcji, funkcji obsługi zdarzeń na, powiedzmy,
prop wniosku onPress naszego niestandardowego przycisku, ale można
nazwać ten wniosek dowolnym, można go nazwać onClick, ponieważ w koniec, to
ty
używasz własnego przycisku i tam musisz tylko upewnić się, że przekazujesz odwołanie do funkcji dopasowania,
wskaźnik dopasowania w funkcji obsługi zdarzeń do onPress lub jakkolwiek nazywasz ją własnym przyciskiem.
Ta nazwa należy
do ciebie, teraz użyjmy głównego przycisku i użyjmy
go na ekranie startowym gry. Tam możemy go
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
gry.
Zastąpię tutaj przycisk przyciskiem głównym, ale
pamiętaj, że na tym przycisku skonfigurowałem treść, tekst do wyświetlenia, tak aby faktycznie była to
treść przekazywana między otwierającymi i zamykającymi znacznikami naszego przycisku, a zatem z powrotem na ekranie gry początkowej tytuł
nie jest
już przekazywany na rekwizycie tytułowym, ale zamiast tego mamy teraz otwierający i zamykający znacznik
dla naszego własnego przycisku i tam dodajemy grę początkową.
Teraz onPress jest nadal rekwizytem, który tu zostawiamy, ponieważ w głównym przycisku przekazuję zdarzenie onPress,
żeby tak powiedzieć, do funkcji, którą dostaję tutaj własną propozycję onPress,
dlatego musimy ustawić prop onPress na własnym przycisku, a zatem dzięki temu powinniśmy mieć tutaj ładny
główny przycisk, ładny przycisk, gdy rozpoczynamy nową grę.
Spróbujmy tutaj, tak
to wygląda i według mnie wygląda całkiem fajnie, ładny przycisk.
Nie skończyłem
jednak, chcę mieć zaokrąglone rogi na tym przycisku i w tym
celu, w głównym pliku przycisku, możemy oczywiście po prostu przejść do tej właściwości
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
25, a jeśli to zrobimy, zobaczysz, że jeśli teraz dostanę ten przycisk, to ma tutaj ładny wygląd.
Możesz także pokazać go na Androidzie, który ma teraz zaokrąglone rogi i ma przyjemny efekt krycia, gdy go
dotkniesz,
a przy okazji, jak już wspomniano wcześniej, możesz zmienić ten efekt krycia, przechodząc do dotykalnego
komponentu krycia i tam możesz ustaw aktywne krycie na poziom krycia, który chcesz mieć po naciśnięciu, na przykład,
jeśli użyjesz
tutaj raczej wysokiej wartości, to ten efekt jest mniej silny, teraz jest tylko nieznacznie
przezroczysty, gdy go klikamy, a nie tak przezroczysty jak przed. Ale to zależy od
ciebie,
tutaj chcesz. 6 tutaj, aby uzyskać nieco
silniejszy efekt, ale znowu to jest coś, co możesz skonfigurować i ogólnie rzecz biorąc, sugeruję, abyś bawił się tym i
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ć
go w grze na
ekranie, więc tam
też zaimportuję główny przycisk z komponentów / MainButton w ten sposób, a następnie po prostu dodam ten
główny przycisk tutaj, gdy pokażemy nasz nowy przycisk gry tam na dole.
Zamiast tego użyj przycisku głównego, dlatego usuń rekwizyt tytułowy, ponieważ nie w
ten sposób ustawiamy tytuł na
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.
Dlatego teraz tutaj powinno to wyglądać ładniej, jeśli szybko zakończymy grę tutaj, starając się, aby komputer zgadł 33,
oto jesteśmy i
teraz widzimy tutaj również ładny przycisk.
Widzimy tu również prawidłowy wynik dotyczący liczby rund i
liczby,
którą musieliśmy zgadnąć, i możemy rozpocząć nową grę później, a także przejść
przez to bardzo szybko, tak, to wszystko wygląda naprawdę ładnie.
Pozostaje mi teraz jeszcze tylko ochota pracować nad tymi dwoma przyciskami, dolnym i większym.
Są trochę nudne, powiedziałbym,
ż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
ekscytująco, jest użycie naszego niestandardowego przycisku.
Oczywiście tutaj, na ekranie gry, możemy również zaimportować główny przycisk z komponentów / MainButton, więc nasz własny
przycisk niestandardowy i użyć go zamiast przycisku, którego obecnie używamy, który
jest wbudowany. Więc użyj
naszego własnego przycisku tutaj, dlatego oczywiście przenieś tytuł między tagami
otwierającym i zamykającym, więc tutaj jest niższy, a następnie tutaj drugi przycisk, który jest
większy, a teraz powinien wyglądać nieco ładniej, jeśli zaczniemy nową grę tutaj .
Teraz używamy tutaj niestandardowych przycisków, chociaż teraz widzimy również problem, są
one po prostu trochę za duże, są zbyt blisko siebie, możemy
to zmienić, przechodząc do pojemnika z przyciskami i pozostawiając to trochę większa szerokość, może
faktycznie ustaw tutaj maksymalną szerokość na 90%.
Więc teraz, jeśli spróbujemy ponownie, tak, to wygląda trochę lepiej, między przyciskami jest co najmniej trochę odstępu
i na razie to zrobi, ponieważ na razie nie optymalizujemy dla wszystkich rozmiarów ekranu.
Zwiększmy również tę szerokość tutaj do 400, abyśmy mieli wystarczającą szerokość, faktycznie
używamy 400 pikseli, a teraz wygląda to dobrze tutaj na iOS
i na Androida. Teraz wygląda to trochę lepiej,
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ć
sprawę i do tej pory nie
korzystaliśmy z ikon często jednak potrzebujesz ich w aplikacjach mobilnych. Jest to z pewnością coś, o czym powinieneś
również wiedzieć, powinieneś być świadomy tego, jak pracować z ikonami, jak dodawać ikony w swojej aplikacji
i dlatego zrobimy to dalej.