Teraz dodawaliśmy już czcionki wiele razy w tym kursie, więc nie jest to
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
przez cały kurs, otwarte bez pogrubienia i regularne, a
teraz musimy je załadować, gdy aplikacja
uruchomi się w aplikacji. plik js. Tam możesz
teraz zaimportować coś z expo i że jest to składnik ładujący aplikację, a także musisz zaimportować gwiazdkę jako czcionkę z
expo-font i upewnić się, że jest ona dostępna, uruchom npm install - zapisz font
expo, aby zainstalować w swoim projekcie i upewnij się, że możesz go użyć.
Teraz są to dwie rzeczy, które musisz tam zainstalować, a
po zainstalowaniu możemy dodać tutaj nową funkcję, być może nazwać ją pobierać czcionki.
Jest to funkcja, która ostatecznie nie przyjmuje żadnych argumentów, ale tam mogę teraz wywołać asynchronię ładowania czcionek
i zwrócić ją, ponieważ to zwraca obietnicę, a
czcionki pobierania powinny zwrócić obietnicę, a następnie przekazać obiekt JavaScript,
w którym odwzorowujemy czcionki chcę załadować, a następnie będę miał open-sans, który
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
i mapę wymaganie / asset / fonts / open-sans-bold, aby zaimportować tutaj obie czcionki.
Teraz oczywiście należy wywoływać czcionki pobierania, które powinny być wywoływane przez nasz moduł
ładujący aplikację, dlatego musimy również zaimportować stan użycia z React, abyśmy mogli kontrolować,
czy dane
zostały już załadowane, czy nie, aby w tutaj funkcjonalny komponent, możemy mieć stan załadowania czcionki i ustawić ładowanie czcionki
oraz początkowo stan użycia, czyli fałsz.
Jeśli to prawda, chcę wyrenderować ten wynik, więc dopóki jest
to fałsz, stąd wykrzyknik, chcę zamiast tego zwrócić komponent ładujący aplikację, który przedłuża nasze ładowanie,
ekran startowy i tam, musimy podaj te startowe asynchroniczne rekwizyty, które wskazują na funkcję pobierania czcionek,
która jest funkcją, która jest wykonywana, gdy ten komponent jest renderowany po
raz pierwszy, a następnie na zakończenie, która wykonuje funkcję po zakończeniu ładowania i w tej funkcji, która
ma zostać wykonana,
I ' Ustawię ładowaną czcionkę na true, aby nie renderować ładowania aplikacji, ale zamiast tego renderujemy tę treść.
Teraz nasze czcionki są ładowane i teraz możemy ich używać, a ja chcę ich używać w dwóch miejscach -
mój produkt, który jest składnikiem, który renderujemy w przeglądzie produktów. Oczywiście mamy trochę
tekstu, mamy tytuł i naszą cenę tutaj i tam, gdzie w
tytule, chcę również ustawić rodzinę czcionek open-sans-pogrubioną, a
na cenę chcę też ustawić rodzina czcionek open-sans i na
ekranie szczegółów produktu jest taka sama. Cena może wymagać rodziny czcionek open-sans-bold, aby mieć ten odważny
styl, a opis po prostu otrzyma czcionkę open sans.
Teraz to nie wszystko, w nawigatorze sklepu w moim głównym nawigatorze tutaj, w domyślnych
opcjach
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
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
sposób ten tylny tekst, który widzimy w iOS, ma taką styl i powinien również używać
rodziny czcionek open-sans, a nie pogrubionej wersja. Dzięki temu, jeśli teraz zapiszemy to i przeładujemy, zobaczymy,
że nasza własna czcionka się przyzwyczaja. Teraz widzimy również, że tutaj na iOS, nasz tytuł jest zatem
odcięty, to musimy coś naprawić, ale ogólnie rzecz biorąc, teraz wygląda to tak, jak powinno. Teraz upewnijmy się, że odcinany
tytuł jest naprawiony, a dla tego tutaj produktu, w którym mamy ten tytuł, tutaj ten
tytuł może mieć obniżony margines w pionie tylko 2, ponieważ nadal podoba mi się ta odległość, a teraz 15%
wysokości nadajemy tytułowi, a cena wystarczy, aby się tym podzielić, a zatem
teraz wygląda to tak, jak powinno.
Teraz używamy niestandardowej czcionki, możemy przejść do strony szczegółów. Powiedziałbym, że
nadszedł czas, aby upewnić się, że możemy dodawać elementy do koszyka, a zatem sprawiamy,
że przycisk koszyka działa.