Przewodnik dotyczący używania niestandardowych czcionek w React Native

React Native zapewnia kilka domyślnych stylów czcionek do wyboru podczas budowania aplikacji. Aby jednak zapewnić swojej aplikacji oryginalność i indywidualność, której potrzebuje, aby wyróżnić się na zatłoczonym rynku, czasami konieczne może być użycie niestandardowych czcionek.

Nauczmy się, jak stosować niestandardowe czcionki podczas tworzenia kolejnego projektu React Native.

Zrozumienie formatów plików czcionek

Dzięki React Native możesz dodawać niestandardowe pliki czcionek do projektu i dostosowywać wygląd elementów tekstowych w swoich aplikacjach. Te niestandardowe czcionki są dostępne w plikach czcionek o różnych formatach. Pliki zawierają zakodowane informacje o stylu dla określonego kroju czcionki.

Najpopularniejsze formaty plików czcionek, których będziesz używać w programowaniu mobilnym React Native to:

• Czcionka TrueType (TTF): Jest to popularny format plików czcionek obsługiwany przez większość systemów operacyjnych i aplikacji. Pliki TTF są stosunkowo małe i mogą zawierać wiele znaków.
  instagram viewer
• Czcionka OpenType (OTF): jest podobna do TTF, ale może również zawierać zaawansowane funkcje typograficzne. Pliki OTF są większe niż pliki TTF i nie każda aplikacja je obsługuje.
• Osadzona czcionka OpenType (EOT): pliki EOT są skompresowane i mogą zawierać informacje o zarządzaniu prawami cyfrowymi (DRM), aby zapobiec nieautoryzowanemu użyciu. Jednak nie wszystkie przeglądarki obsługują EOT i generalnie nie jest zalecane do stosowania w nowoczesnych projektach.

Podczas korzystania z niestandardowych czcionek w projekcie ważne jest, aby wybrać format pliku czcionki, który spełnia potrzeby projektu. Może to obejmować takie czynniki, jak obsługa platformy docelowej, rozmiar pliku, wymagania licencyjne i obsługa zaawansowanych funkcji typograficznych.

Importowanie i stosowanie plików czcionek w React Native

Możesz pobrać plik czcionki z dowolnego miejsca w Internecie i zaimportować go do swojego osobistego projektu React Native, aby go użyć. Jednakże, istnieje wiele dobrych, bezpiecznych stron internetowych do pobierania darmowych czcionek od bezpiecznie.

Aby zaimportować plik czcionki do projektu React Native, utwórz plik zasoby/czcionki katalog w katalogu głównym projektu i przenieś do niego pliki czcionek.

Kroki wymagane do użycia niestandardowych czcionek różnią się w przypadku pracy z projektem wygenerowanym wyłącznie w React Native lub projektem React Native zarządzanym przez Expo.

Reaguj natywny interfejs CLI

Jeśli pracujesz z projektem generowanym przez React Native CLI, utwórz plik Reaguj natywnie.config.js plik i zdefiniuj w nim następujące ustawienia:

moduł.eksport = {
 projekt: {
 iOS: {},
 Android: {}
 },
 aktywa: [ „./zasoby/czcionki/” ],
}

Ta konfiguracja nakazuje projektowi uwzględnienie zasobów czcionek przechowywanych w „./zasoby/czcionki/” katalog, aby aplikacja mogła uzyskiwać do nich dostęp podczas renderowania elementów tekstowych.

Następnie możesz połączyć plik aktywa folder do swojego projektu, uruchamiając następujące polecenie:

npx reaguje-natywny-zasób

link npx reagujący natywnie

Teraz możesz używać połączonych niestandardowych czcionek tak, jak zwykle w stylach CSS, nazywając ich dokładną nazwę w stylu rodziny czcionek:

Witaj świecie!</Text>
konst style = StyleSheet.create({
 czcionkaTekst: {
 rodzina czcionek: „Przechylny pryzmat”,
 rozmiar czcionki: 20,
 },
});

Expo-CLI

W przypadku projektów generowanych przez Expo należy zainstalować bibliotekę expo-fonts jako zależność do importowania i stosowania niestandardowych czcionek. Zainstaluj go za pomocą tego polecenia:

npx expo zainstaluj expo-font

Teraz możesz używać czcionek expo w pliku projektu w następujący sposób:

import Reaguj, { useState, useEffect } z'reagować';
import { Tekst, widok, arkusz stylów } z„reaguj natywnie”;
import * Jak Czcionka z„czcionka expo”;
konst Tekst niestandardowy = (rekwizyty) => {
konst [fontLoaded, setFontLoaded] = useState(FAŁSZ);
 użyjEfekt(() => {
asynchronicznyfunkcjonowaćwczytaj czcionkę() {
czekać na Font.loadAsync({
„niestandardowa czcionka”: wymagać(„./assets/fonts/CustomFont.ttf”),
 });
 setFontLoaded(PRAWDA);
 }
 ładujFont();
 }, []);
Jeśli (!fontLoaded) {
powrót<Tekst>Ładowanie...Tekst>;
 }
powrót (
rodzina czcionek: „niestandardowa czcionka” }}>
 {rekwizyty.dzieci}
 </Text>
 );
};
konst Aplikacja = () => {
powrót (

Witaj świecie!</CustomText>
 </View>
 );
};
konst style = StyleSheet.create({
 pojemnik: {
 przewód: 1,
 uzasadnij Treść: 'Centrum',
 elementy wyrównania: 'Centrum',
 },
 tekst: {
 rozmiar czcionki: 24,
 grubość czcionki: 'pogrubiony',
 },
});
eksportdomyślny Aplikacja;

Możesz lepiej przebudować i ulepszyć powyższy blok kodu, stosując metodę wzorzec projektowy kontenerów i komponentów prezentacyjnych.

Oto dane wyjściowe aplikacji React Native CLI i Expo CLI:

Ustawianie niestandardowej czcionki jako domyślnej czcionki dla Twojej aplikacji Expo

Możesz chcieć użyć niestandardowej czcionki jako domyślnej czcionki dla całej aplikacji React Native, zamiast stosować ją do każdej z nich Tekst komponent indywidualnie. Aby to zrobić, możesz użyć tzw Tekst składniki domyślneWłaściwości aby ustawić domyślną rodzinę czcionek dla wszystkich Tekst komponenty w Twojej aplikacji.

Użyj Text.defaultProps właściwość do ustawienia rodzina czcionek właściwość na nazwę niestandardowej czcionki.

Oto przykład:

import Reaguj, { useEffect } z'reagować';
import { Tekst } z„reaguj natywnie”;
import * Jak Czcionka z„czcionka expo”;
konst Aplikacja = () => {
 użyjEfekt(() => {
asynchronicznyfunkcjonowaćwczytaj czcionkę() {
czekać na Font.loadAsync({
„niestandardowa czcionka”: wymagać(„./assets/fonts/CustomFont.ttf”),
 });
 Text.defaultProps.style.fontFamily = „niestandardowa czcionka”;
 }
 ładujFont();
 }, []);
powrót (
Witaj świecie!</Text>
 );
};
eksportdomyślny Aplikacja;

Ustawianie domyślnej rodziny czcionek za pomocą Text.defaultProps wpłynie tylko na komponenty tekstowe utworzone po ustawieniu wartości domyślnej. Jeśli komponenty Text zostały już utworzone przed ustawieniem domyślnej rodziny czcionek, konieczne będzie ustawienie rodzina czcionek właściwości tych komponentów indywidualnie.

Tworzenie niestandardowej rodziny czcionek z wieloma stylami czcionek

Aby utworzyć niestandardową rodzinę czcionek z wieloma stylami czcionek w aplikacji generowanej przez React Native CLI, najpierw musisz zaimportować pliki czcionek do swojego projektu. Następnie utwórz niestandardowy obiekt rodziny czcionek, który odwzorowuje grubości i style czcionek na odpowiadające im ścieżki plików czcionek.

Na przykład:

import { Tekst } z„reaguj natywnie”;
import Niestandardowe czcionki z„../config/Czcionki”;
konst Aplikacja = () => {
konst niestandardowe czcionki = {
„Czcionka niestandardowa — zwykła”: wymagać(„../fonts/CustomFont-Regular.ttf”),
„Czcionka niestandardowa — pogrubiona”: wymagać(„../fonts/CustomFont-Bold.ttf”),
„Czcionka niestandardowa — kursywa”: wymagać(„../fonts/CustomFont-Italic.ttf”),
 };
asynchroniczny składnikDidMount() {
czekać na Font.loadAsync (CustomFonts);
 }
powrót(

 Witaj świecie!
 </Text>
 );
};
konst style = StyleSheet.create({
 tekst: {
 rodzina czcionek: „Czcionka niestandardowa — zwykła”,
 styl czcionki: 'italski',
 grubość czcionki: 'pogrubiony',
 rozmiar czcionki: 20,
 },
});
eksportdomyślny Aplikacja;

Pamiętaj, że ścieżki i nazwy plików czcionek w tym przykładzie są tylko symbolami zastępczymi i będziesz musiał je zastąpić rzeczywistymi ścieżkami i nazwami plików czcionek. Ponadto należy upewnić się, że niestandardowe pliki czcionek zostały prawidłowo zaimportowane do projektu i że ich ścieżki odpowiadają ścieżkom zdefiniowanym w obiekcie rodziny czcionek.

Ostatnie przemyślenia na temat niestandardowych czcionek w React Native

Niestandardowe czcionki mogą nadać Twojej aplikacji React Native wyjątkowy i spersonalizowany charakter. W tym artykule omówiliśmy, jak używać niestandardowych czcionek w React Native, w tym importować pliki czcionek, ustawiać niestandardową czcionkę jako domyślną czcionkę dla całej aplikacji, tworzenie niestandardowej rodziny czcionek z wieloma stylami czcionek i ładowanie niestandardowych czcionek bez użycia Expo.

Zawsze sprawdzaj ograniczenia licencyjne używanej czcionki i upewnij się, że masz pozwolenie na używanie jej w swojej aplikacji. Należy również pamiętać, że załadowanie wielu niestandardowych czcionek może zwiększyć rozmiar aplikacji, dlatego należy dołączyć tylko te czcionki, których faktycznie potrzebujesz.