1 00:00:02,190 --> 00:00:06,450 Teraz dodawaliśmy już czcionki wiele razy w tym kursie, więc nie jest to 2 00:00:06,450 --> 00:00:12,780 zbyt nowe, jak to działa. W folderze zasobów dodam folder czcionek, ale ponownie możesz przechowywać je w dowolnym miejscu. W załączeniu znajdziesz dwie czcionki, których używaliśmy 3 00:00:12,780 --> 00:00:15,470 przez cały kurs, otwarte bez pogrubienia i regularne, a 4 00:00:15,480 --> 00:00:17,550 teraz musimy je załadować, gdy aplikacja 5 00:00:17,550 --> 00:00:22,690 uruchomi się w aplikacji. plik js. Tam możesz 6 00:00:23,100 --> 00:00:34,690 teraz zaimportować coś z expo i że jest to składnik ładujący aplikację, a także musisz zaimportować gwiazdkę jako czcionkę z 7 00:00:34,690 --> 00:00:42,310 expo-font i upewnić się, że jest ona dostępna, uruchom npm install - zapisz font 8 00:00:42,340 --> 00:00:49,870 expo, aby zainstalować w swoim projekcie i upewnij się, że możesz go użyć. 9 00:00:49,890 --> 00:00:53,760 Teraz są to dwie rzeczy, które musisz tam zainstalować, a 10 00:00:53,770 --> 00:00:58,620 po zainstalowaniu możemy dodać tutaj nową funkcję, być może nazwać ją pobierać czcionki. 11 00:00:58,640 --> 00:01:07,690 Jest to funkcja, która ostatecznie nie przyjmuje żadnych argumentów, ale tam mogę teraz wywołać asynchronię ładowania czcionek 12 00:01:08,200 --> 00:01:13,510 i zwrócić ją, ponieważ to zwraca obietnicę, a 13 00:01:13,510 --> 00:01:18,910 czcionki pobierania powinny zwrócić obietnicę, a następnie przekazać obiekt JavaScript, 14 00:01:18,940 --> 00:01:25,560 w którym odwzorowujemy czcionki chcę załadować, a następnie będę miał open-sans, który 15 00:01:25,560 --> 00:01:38,020 mapuję na mój, wymaga importu tutaj, gdzie wskazuję folder zasobów, folder czcionek i ten open-sans zwykły, a także dodam open-sans-pogrubienie tutaj jako klucz 16 00:01:38,080 --> 00:01:45,560 i mapę wymaganie / asset / fonts / open-sans-bold, aby zaimportować tutaj obie czcionki. 17 00:01:45,580 --> 00:01:51,230 Teraz oczywiście należy wywoływać czcionki pobierania, które powinny być wywoływane przez nasz moduł 18 00:01:51,370 --> 00:01:56,800 ładujący aplikację, dlatego musimy również zaimportować stan użycia z React, abyśmy mogli kontrolować, 19 00:01:56,800 --> 00:01:57,990 czy dane 20 00:01:58,240 --> 00:02:06,430 zostały już załadowane, czy nie, aby w tutaj funkcjonalny komponent, możemy mieć stan załadowania czcionki i ustawić ładowanie czcionki 21 00:02:06,430 --> 00:02:09,080 oraz początkowo stan użycia, czyli fałsz. 22 00:02:09,250 --> 00:02:13,190 Jeśli to prawda, chcę wyrenderować ten wynik, więc dopóki jest 23 00:02:13,270 --> 00:02:18,970 to fałsz, stąd wykrzyknik, chcę zamiast tego zwrócić komponent ładujący aplikację, który przedłuża nasze ładowanie, 24 00:02:18,970 --> 00:02:25,210 ekran startowy i tam, musimy podaj te startowe asynchroniczne rekwizyty, które wskazują na funkcję pobierania czcionek, 25 00:02:25,930 --> 00:02:30,850 która jest funkcją, która jest wykonywana, gdy ten komponent jest renderowany po 26 00:02:30,850 --> 00:02:37,350 raz pierwszy, a następnie na zakończenie, która wykonuje funkcję po zakończeniu ładowania i w tej funkcji, która 27 00:02:37,350 --> 00:02:38,830 ma zostać wykonana, 28 00:02:38,830 --> 00:02:45,890 I ' Ustawię ładowaną czcionkę na true, aby nie renderować ładowania aplikacji, ale zamiast tego renderujemy tę treść. 29 00:02:46,000 --> 00:02:51,490 Teraz nasze czcionki są ładowane i teraz możemy ich używać, a ja chcę ich używać w dwóch miejscach - 30 00:02:51,520 --> 00:02:58,030 mój produkt, który jest składnikiem, który renderujemy w przeglądzie produktów. Oczywiście mamy trochę 31 00:02:58,030 --> 00:03:06,340 tekstu, mamy tytuł i naszą cenę tutaj i tam, gdzie w 32 00:03:06,340 --> 00:03:12,760 tytule, chcę również ustawić rodzinę czcionek open-sans-pogrubioną, a 33 00:03:12,760 --> 00:03:20,020 na cenę chcę też ustawić rodzina czcionek open-sans i na 34 00:03:20,020 --> 00:03:29,080 ekranie szczegółów produktu jest taka sama. Cena może wymagać rodziny czcionek open-sans-bold, aby mieć ten odważny 35 00:03:29,080 --> 00:03:33,310 styl, a opis po prostu otrzyma czcionkę open sans. 36 00:03:33,490 --> 00:03:40,880 Teraz to nie wszystko, w nawigatorze sklepu w moim głównym nawigatorze tutaj, w domyślnych 37 00:03:40,880 --> 00:03:41,880 opcjach 38 00:03:41,900 --> 00:03:51,520 nawigacji, chcę również użyć tej czcionki w nagłówku, więc styl tytułu nagłówka powinien faktycznie być obiektem, w którym ustawiam 39 00:03:51,520 --> 00:04:01,360 rodzinę czcionek aby użyć open-sans-bold, aby użyć tam pogrubionej czcionki open sans, a styl tytułowego nagłówka określa, w jaki 40 00:04:01,510 --> 00:04:09,600 sposób ten tylny tekst, który widzimy w iOS, ma taką styl i powinien również używać 41 00:04:09,600 --> 00:04:17,120 rodziny czcionek open-sans, a nie pogrubionej wersja. Dzięki temu, jeśli teraz zapiszemy to i przeładujemy, zobaczymy, 42 00:04:17,860 --> 00:04:23,060 że nasza własna czcionka się przyzwyczaja. Teraz widzimy również, że tutaj na iOS, nasz tytuł jest zatem 43 00:04:23,110 --> 00:04:29,330 odcięty, to musimy coś naprawić, ale ogólnie rzecz biorąc, teraz wygląda to tak, jak powinno. Teraz upewnijmy się, że odcinany 44 00:04:29,350 --> 00:04:37,010 tytuł jest naprawiony, a dla tego tutaj produktu, w którym mamy ten tytuł, tutaj ten 45 00:04:37,010 --> 00:04:47,340 tytuł może mieć obniżony margines w pionie tylko 2, ponieważ nadal podoba mi się ta odległość, a teraz 15% 46 00:04:47,340 --> 00:04:53,800 wysokości nadajemy tytułowi, a cena wystarczy, aby się tym podzielić, a zatem 47 00:04:53,880 --> 00:04:57,390 teraz wygląda to tak, jak powinno. 48 00:04:57,660 --> 00:05:01,540 Teraz używamy niestandardowej czcionki, możemy przejść do strony szczegółów. Powiedziałbym, że 49 00:05:01,710 --> 00:05:06,750 nadszedł czas, aby upewnić się, że możemy dodawać elementy do koszyka, a zatem sprawiamy, 50 00:05:06,750 --> 00:05:08,340 że przycisk koszyka działa.