1 00:00:02,190 --> 00:00:07,460 Teraz, gdy nauczyłeś się, jak dodawać czcionki do aplikacji i dołączasz, znajdziesz plik zip z czcionkami, 2 00:00:07,470 --> 00:00:10,000 które chcę dodać. W tym celu w 3 00:00:10,020 --> 00:00:16,290 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, 4 00:00:16,290 --> 00:00:19,350 w załączniku, który chcę dodać tutaj. 5 00:00:19,470 --> 00:00:22,670 Teraz samo dodawanie plików nie zrobi wiele, jak oczywiście wiesz, zamiast tego 6 00:00:22,710 --> 00:00:27,690 musimy załadować te czcionki i robimy to w aplikacji. plik js, który jest naszym plikiem początkowym, 7 00:00:27,690 --> 00:00:31,070 który uruchamia całą aplikację. Tam musimy zaimportować 8 00:00:31,170 --> 00:00:36,660 wszystko jako czcionkę z czcionki expo i może to nie 9 00:00:36,660 --> 00:00:43,320 być jeszcze dostępne w twoim projekcie, dlatego możesz chcieć uruchomić npm install - 10 00:00:43,320 --> 00:00:45,010 zapisz font 11 00:00:45,030 --> 00:00:52,530 expo, aby upewnić się, że jest dostępny, aby zainstalować z zainstalowanym pakietem możesz stamtąd 12 00:00:52,620 --> 00:00:54,750 zaimportować czcionkę, chcę też 13 00:00:54,750 --> 00:01:02,910 zaimportować komponent ładujący aplikację z wystawy, to element, który wydłuży ekran powitalny po uruchomieniu aplikacji, dopóki 14 00:01:02,910 --> 00:01:09,000 nasze czcionki nie zostaną załadowane, tak abyśmy tylko zobaczyć coś na 15 00:01:09,000 --> 00:01:14,670 ekranie, gdy wszystkie nasze zasoby, w tym przypadku są to czcionki, 16 00:01:14,700 --> 00:01:22,950 są naprawdę dostępne i naprawdę tam są. Teraz po dodaniu tych importów możemy dodać tutaj 17 00:01:23,250 --> 00:01:25,130 funkcję poza naszą 18 00:01:25,310 --> 00:01:30,180 funkcją składową, którą nazwiemy czcionki pobierania i jest to 19 00:01:30,600 --> 00:01:39,190 funkcja, która ostatecznie użyje czcionki, więc co importuję tutaj, ładuję asynchronię, a następnie przekazać obiekt, w 20 00:01:39,190 --> 00:01:47,110 którym opisujemy dane, które chcemy załadować, i to jest czcionka open sans, którą zarejestruję pod 21 00:01:47,110 --> 00:01:57,890 open sans, dodajemy to, wymagając tego. / asset / fonts / OpenSans, nie pogrubienie, ale regularność. ttf, a ponadto mamy open-sans-bold, to 22 00:01:57,890 --> 00:02:05,470 jest druga czcionka, którą chcę zarejestrować, wymagając jej od asset / fonts / 23 00:02:05,470 --> 00:02:08,210 OpenSans-Bold. ttf, tak jak to. 24 00:02:08,440 --> 00:02:14,320 Teraz musimy to zwrócić, ponieważ asynchroniczne ładowanie zwraca obietnicę, a ja chcę zwrócić to w mojej funkcji 25 00:02:14,320 --> 00:02:20,410 pobierania czcionek, ponieważ dzięki temu możemy go używać razem z komponentem ładującym aplikację i jest to wzorzec, którego 26 00:02:20,410 --> 00:02:22,430 nauczyłeś się wcześniej na kursie. 27 00:02:22,450 --> 00:02:23,970 Jeśli więc jest to 28 00:02:24,010 --> 00:02:28,040 dla Ciebie nowość, najpierw zapoznaj się z pozostałymi częściami tego kursu. 29 00:02:28,060 --> 00:02:34,840 Więc teraz możemy używać czcionek pobierania z ładowaniem aplikacji i robimy to wewnątrz naszego komponentu 30 00:02:34,840 --> 00:02:41,680 aplikacji, tam zarządzam pewnym stanem i robię to za pomocą haka useState, który importujemy z React 31 00:02:42,610 --> 00:02:51,760 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 32 00:02:51,790 --> 00:02:54,260 została załadowana, a następnie tutaj 33 00:02:54,400 --> 00:03:00,100 możemy sprawdzić, czy czcionka nie została załadowana, co na początku ma miejsce, 34 00:03:00,100 --> 00:03:07,270 a następnie chcę wrócić komponent ładujący aplikację zamiast mojej normalnej zawartości aplikacji, ponieważ w komponencie ładującym 35 00:03:07,600 --> 00:03:14,600 aplikację możemy dodać właściwość start async i wskazać czcionki pobierania, które uruchamiają tę funkcję pobierania czcionek, 36 00:03:14,860 --> 00:03:21,430 a gdy to zrobimy, funkcja, którą przekazujemy do onFinish, będzie w tej funkcji po prostu 37 00:03:21,430 --> 00:03:29,240 ustawię ładowaną czcionkę na true, tak jak to. Dzięki temu będziemy mieć po prostu otwarty ekran powitalny, 38 00:03:29,240 --> 00:03:35,600 dopóki nasze czcionki nie zostaną załadowane, i będzie to renderowane do momentu ponownego załadowania 39 00:03:35,840 --> 00:03:42,590 czcionek, a następnie załadujemy tę zawartość. Teraz upewniamy się, że importujemy nasze czcionki i że możemy zacząć 40 00:03:42,590 --> 00:03:45,870 ich używać i będziemy ich potrzebować w tym module. 41 00:03:45,980 --> 00:03:52,280 Dzięki temu nadszedł czas, aby zacząć od dodania nawigacji, po którą wszyscy przyszliśmy.