Teraz, gdy nauczyłeś się, jak dodawać czcionki do aplikacji i dołączasz, znajdziesz plik zip z czcionkami,
które chcę dodać. W tym celu w
folderze zasobów dodam nowy folder czcionek, a następnie jest to OpenSans-Bold i zwykły. Plik ttf, który znajduje się w pliku zip,
w załączniku, który chcę dodać tutaj.
Teraz samo dodawanie plików nie zrobi wiele, jak oczywiście wiesz, zamiast tego
musimy załadować te czcionki i robimy to w aplikacji. plik js, który jest naszym plikiem początkowym,
który uruchamia całą aplikację. Tam musimy zaimportować
wszystko jako czcionkę z czcionki expo i może to nie
być jeszcze dostępne w twoim projekcie, dlatego możesz chcieć uruchomić npm install -
zapisz font
expo, aby upewnić się, że jest dostępny, aby zainstalować z zainstalowanym pakietem możesz stamtąd
zaimportować czcionkę, chcę też
zaimportować komponent ładujący aplikację z wystawy, to element, który wydłuży ekran powitalny po uruchomieniu aplikacji, dopóki
nasze czcionki nie zostaną załadowane, tak abyśmy tylko zobaczyć coś na
ekranie, gdy wszystkie nasze zasoby, w tym przypadku są to czcionki,
są naprawdę dostępne i naprawdę tam są. Teraz po dodaniu tych importów możemy dodać tutaj
funkcję poza naszą
funkcją składową, którą nazwiemy czcionki pobierania i jest to
funkcja, która ostatecznie użyje czcionki, więc co importuję tutaj, ładuję asynchronię, a następnie przekazać obiekt, w
którym opisujemy dane, które chcemy załadować, i to jest czcionka open sans, którą zarejestruję pod
open sans, dodajemy to, wymagając tego. / asset / fonts / OpenSans, nie pogrubienie, ale regularność. ttf, a ponadto mamy open-sans-bold, to
jest druga czcionka, którą chcę zarejestrować, wymagając jej od asset / fonts /
OpenSans-Bold. ttf, tak jak to.
Teraz musimy to zwrócić, ponieważ asynchroniczne ładowanie zwraca obietnicę, a ja chcę zwrócić to w mojej funkcji
pobierania czcionek, ponieważ dzięki temu możemy go używać razem z komponentem ładującym aplikację i jest to wzorzec, którego
nauczyłeś się wcześniej na kursie.
Jeśli więc jest to
dla Ciebie nowość, najpierw zapoznaj się z pozostałymi częściami tego kursu.
Więc teraz możemy używać czcionek pobierania z ładowaniem aplikacji i robimy to wewnątrz naszego komponentu
aplikacji, tam zarządzam pewnym stanem i robię to za pomocą haka useState, który importujemy z React
i nadam temu nazwę załaduj czcionkę i ustaw czcionkę załadowaną i wywołaj useState i początkowo to fałsz, ponieważ początkowo czcionka nie
została załadowana, a następnie tutaj
możemy sprawdzić, czy czcionka nie została załadowana, co na początku ma miejsce,
a następnie chcę wrócić komponent ładujący aplikację zamiast mojej normalnej zawartości aplikacji, ponieważ w komponencie ładującym
aplikację możemy dodać właściwość start async i wskazać czcionki pobierania, które uruchamiają tę funkcję pobierania czcionek,
a gdy to zrobimy, funkcja, którą przekazujemy do onFinish, będzie w tej funkcji po prostu
ustawię ładowaną czcionkę na true, tak jak to. Dzięki temu będziemy mieć po prostu otwarty ekran powitalny,
dopóki nasze czcionki nie zostaną załadowane, i będzie to renderowane do momentu ponownego załadowania
czcionek, a następnie załadujemy tę zawartość. Teraz upewniamy się, że importujemy nasze czcionki i że możemy zacząć
ich używać i będziemy ich potrzebować w tym module.
Dzięki temu nadszedł czas, aby zacząć od dodania nawigacji, po którą wszyscy przyszliśmy.