Teraz, gdy działa ogólna logika gry, skupmy się bardziej na dokończeniu tej stylizacji, a także
na dodaniu własnych niestandardowych czcionek i ładnego małego obrazu w grze na ekranie,
ponieważ praca z obrazami i praca z niestandardowymi czcionkami jest typową rzeczą we współczesnym tworzenie aplikacji
oczywiście rzadko chcesz trzymać się domyślnych czcionek systemowych i rzadko masz aplikację bez żadnych obrazów.
Dlatego zacznijmy od niestandardowych czcionek i w expo React Native dodawanie czcionek jest bardzo proste.
W folderze projektu, w
folderze zasobów, utwórzmy folder czcionek. Możesz przechowywać to w dowolnym miejscu, ale
lubię przechowywać go w folderze zasobów, aby uporządkować moje zasoby, takie jak czcionki i obrazy.
Więc tutaj, w folderze czcionek, nie jest zaskoczeniem, że chcę zarządzać czcionkami i do
tego dołączam plik zip z dwiema czcionkami, które możesz po prostu wyodrębnić, a następnie
przeciągnąć i upuścić tutaj, to jest OpenSans-Bold i
OpenSans-Regular, więc te dwie czcionki są dołączone do tego filmu w pliku zip, rozpakowane i przeciągnij je
do folderu czcionek.
Teraz te czcionki są ogólnie dostępne, ale aby ich użyć, nadal musisz skonfigurować więcej.
Musisz przejść do swojej aplikacji. plik js i po prostu poinstruuj React Native i expo, aby
załadował te czcionki, aby ich użyć. Do tego w aplikacji. plik js i korzystam z aplikacji. plik js, ponieważ jest
to pierwszy plik, który jest ładowany lub który jest wykonywany, aby powiedzieć, kiedy
aplikacja się uruchamia i chcesz załadować czcionki po uruchomieniu aplikacji, tam musisz dodać import, a import polega na
tym, że importujesz wszystko jako czcionka, chociaż ta nazwa zależy od ciebie, ale zazwyczaj używasz tutaj czcionki z expo-font.
Więc expo-font to pakiet, który daje ci narzędzia do czcionek, więc narzędzia, które pozwalają ci ładować czcionki i importować wszystko
z tego pakietu i łączyć je razem w tym obiekcie czcionek, właśnie to
robimy tutaj. Teraz, aby
załadować czcionki, dodam nową funkcję poza komponentem funkcjonalnym, ponieważ ta funkcja nie
musi być odtwarzana dla każdego cyklu ponownego wysyłania komponentu.
Teraz nadam mu nazwę
pobierania czcionek,
nazwa należy do Ciebie i
tutaj, w tej funkcji, wywołam czcionkę. loadAsync.
Teraz jest to funkcja lub metoda w pakiecie czcionek, którą tutaj importujemy, która
pozwala ładować czcionki, a to, co przekazujesz, aby załadować asynchronię, jest obiektem, w którym informujesz Expo, a zatem React Native o
wszystkich czcionkach, które chcesz obciążenie. Robisz to za pomocą klawisza, w którym
wybierasz dowolną nazwę, na przykład open-sans, a później będziesz mógł używać tych czcionek pod tymi nazwami,
więc tutaj otwórz sans, ponieważ moja czcionka nazywa się open sans.
Więc tutaj jest otwarty sans, a następnie dodajesz wymaganie,
jest to funkcja językowa, którą JavaScript oferuje, wskazując ścieżkę, w której ta czcionka jest przechowywana.
To ścieżka
względna, więc tutaj wskazuję folder zasobów, folder
czcionek, a następnie jest to OpenSans-Bold, nie pogrubiony, ale regularny. plik ttf, a teraz dodam tutaj drugi
element do tego obiektu, który przekazuję, aby załadować asynchronię i który może być open-sans-bold.
Teraz te nazwy są całkowicie od Ciebie i tam chcę załadować odważną wersję.
W związku z tym informujemy React Native na końcu, gdzie żyją nasze czcionki, gdzie te pliki czcionek żyją i na jakie nazwy chcemy je
zamapować, a my możemy później użyć tych nazw do przypisania tych czcionek do tekstu. Teraz ładowanie asynchroniczne faktycznie zwraca obietnicę, co oznacza, że potrwa
to trochę dłużej, a nie bardzo długo, ale nie załaduje ich natychmiast i zwrócę tę obietnicę tutaj
wewnątrz czcionek pobierania, aby za każdym razem, gdy wywołujemy czcionki pobierania, możemy poczekać aby
ta obietnica została rozwiązana, zanim będziemy kontynuować. Skąd jednak
chcemy pobrać nasze czcionki?
Cóż, moglibyśmy ręcznie załadować nasze czcionki tutaj, moglibyśmy na przykład wywoływać czcionki pobierania tego typu i to robiłoby to dalej i
pobierałoby nasze czcionki,
ale problem polega na tym, że kontynuowalibyśmy renderowanie i ostatecznie renderowalibyśmy naszą zawartość, a jeśli w ogóle w
treści, używamy tekstu, który próbuje użyć takiej czcionki, jeśli czcionka nie
została jeszcze załadowana i jak powiedziałem, zajmie to tylko kilka milisekund, ale nadal w pierwszym cyklu
renderowania, czcionka mogła nie zostać załadowana, a następnie dostalibyśmy błąd. Dlatego ładowanie naszych czcionek w
ten sposób nie jest zalecane, najprawdopodobniej nie będzie działać.
Zamiast tego istnieje specjalny komponent, którego można użyć, który pomaga załadować czcionki. Importujesz ten komponent
z expo, a nazwa tego komponentu to AppLoading.
Teraz jest to komponent, który zasadniczo wydłuża domyślny ekran ładowania, użytkownicy ekranu powitalnego i tak
widzą się podczas uruchamiania aplikacji, wydłuży ten ekran, aby pozostać aktywny, dopóki nie zostanie wykonane
określone zadanie,
na przykład do czasu pobrania czcionek gotowy.
Tak więc AppLoading jest w komponencie aplikacji, musimy tylko upewnić
się, że renderujemy ten komponent zamiast naszej faktycznej zawartości, o ile nie
załadowaliśmy jeszcze naszych
czcionek lub dopóki nie skończymy z ładowaniem czegokolwiek chcieliśmy załadować.
Fajne jest to, że możemy do tego użyć stanu i zacząć od wartości
początkowej false, ponieważ stan, którym chcę tu zarządzać, to ładowane dane lub jakkolwiek chcesz to nazwać i ustawić ładowane dane.
Teraz chcę sprawdzić, czy załadowane dane nie są prawdziwe, stąd wykrzyknik, a następnie wiem, że dane nie zostały jeszcze załadowane
i tak jest początkowo w tym przypadku, w tym przypadku nie będę nawet
kontynuował
mojej innej logiki , zamiast tego dla tego funkcjonalnego komponentu, natychmiast zwrócę komponent AppLoading jako treść aplikacji zasadniczo, ponieważ nie
chcę renderować żadnej innej zawartości, jeśli nadal ładujemy nasze dane.
Teraz AppLoading jest komponentem pochodzącym z Expo, który przyjmuje startową asynchroniczną rekwizyt, w którym wskazujemy operację, którą chcemy rozpocząć, gdy
jest ona renderowana po raz pierwszy, i to oczywiście nasza funkcja pobierania czcionek.
Więc tutaj wskazuję na pobieranie czcionek, na tę funkcję.
Teraz ważne: a) musi
to być funkcja, którą tutaj przekazujesz, i b) musi to być funkcja, która
zwraca obietnicę, ponieważ expo automatycznie wysłucha tej obietnicy i gdy
obietnica się rozwiąże, będzie wiedział, że ładowanie jest zrobione, a następnie zadzwoni na cokolwiek przekażesz tutaj
do onFinish.
Tutaj musisz przekazać funkcję, która następnie ustawia ładowane dane na wartość true.
Ta funkcja zostanie tutaj wykonana, gdy ta operacja zostanie wykonana, i aby expo dowiedział
się, kiedy
to zostanie wykonane, powinno to zwrócić obietnicę.
Więc teraz te dwa rekwizyty będą działać razem i aktualizujemy załadowane dane, ten stan jest prawdziwy i
dlatego nie renderujemy tej zawartości, ale kontynuujemy wykonywanie tego kodu i ostatecznie renderowanie zawartości tam, gdy
pobieranie naszych czcionek
jest zakończone, a ty można tutaj wykonać dowolną operację asynchroniczną, ale zwykle ładuje się niektóre zasoby, takie jak
czcionki lub cokolwiek podobnego, przy użyciu AppLoading, więc
zasoby, które powinny tam być, gdy aplikacja się uruchomi, które są potrzebne natychmiast i
zwykle są to czcionki.
Nawiasem mówiąc, teraz możesz dodać tutaj procedurę obsługi onError, a tutaj po prostu konsolę zarejestruję obiekt błędu,
który również
otrzymujemy w przypadkach, gdy ładowanie się nie powiedzie. Oczywiście możesz nie tylko tego zalogować, ale zamiast tego zrobić coś
innego, wyświetlić alternatywne treści w swojej
aplikacji, coś w tym rodzaju. Tutaj po prostu to zarejestruję,
ponieważ to nie powinno zawieść, czcionki są dostępne lokalnie tutaj, więc można je ładować bez problemów.
Teraz, jeśli to zapiszemy, nasza aplikacja oczywiście uruchomi się ponownie i nie zauważymy tutaj żadnej różnicy,
nasz ekran ładowania również nie potrwa dłużej niż wcześniej, ponieważ ładowanie jest super szybkie, po
prostu nie dzieje
się natychmiast, dlatego potrzebowaliśmy to podejście.
Ale teraz załadowaliśmy
czcionki, jak możemy ich teraz używać?
Powiedzmy, że chcemy zmienić nasz nowy tytuł gry, aby używać naszej czcionki. Teraz musimy przejść do ekranu
startowego gry, w którym ten tytuł mieszka na końcu, tutaj, rozpocząć nową grę, ma styl tytułowy, a
zatem w arkuszu stylów tutaj w tytule, możemy teraz ustawić rodzina czcionek,
aby zmienić rodzinę czcionek i ustawić ją na
przykład na
open-sans-bold, a oczywiście używany tutaj identyfikator musi być identyfikatorem załadowanym tutaj.
Więc tutaj mam open-sans-pogrubienie i open sans,
mogę użyć tych dwóch identyfikatorów w moim kodzie w dowolnym miejscu aplikacji, gdy chcę przypisać niestandardową czcionkę i
właśnie to robię tutaj.
Teraz widzisz, że ma inną czcionkę, która jest pogrubiona, a przy okazji, jeśli używasz niestandardowych
czcionek i chcesz pogrubioną czcionkę, musisz załadować ją z
rodziną czcionek, nie możesz ustawić jej grubości. React Native obsługuje to, ale w przypadku czcionek niestandardowych expo w
tej chwili
nie obsługuje tego, zamiast tego musisz po prostu użyć oddzielnej rodziny czcionek, co nie jest tak naprawdę problemem.