Průvodce používáním vlastních písem v React Native

React Native nabízí několik výchozích stylů písem, ze kterých si můžete vybrat při sestavování aplikace. Chcete-li však své aplikaci nabídnout originalitu a individualitu, kterou potřebuje, aby vynikla na přeplněném trhu, může být občas potřeba použít vlastní písma.

Pojďme se naučit, jak použít vlastní písma při vytváření vašeho dalšího projektu React Native.

Porozumění formátům souborů písem

S React Native můžete do projektu přidat soubory vlastních písem a přizpůsobit vzhled textových prvků ve vašich aplikacích. Tato uživatelská písma se dodávají v souborech písem s různými formáty souborů. Soubory obsahují zakódované informace o stylu pro konkrétní typ písma.

Nejběžnější formáty souborů písem, které budete používat při vývoji mobilních zařízení React Native, jsou:

• TrueType Font (TTF): Toto je běžný formát souboru písem, který podporuje většina operačních systémů a aplikací. Soubory TTF jsou relativně malé a mohou obsahovat mnoho znaků.
instagram viewer
• OpenType Font (OTF): Je podobný TTF, ale může také obsahovat pokročilé typografické funkce. Soubory OTF jsou větší než soubory TTF a ne každá aplikace je podporuje.
• Embedded OpenType Font (EOT): Soubory EOT jsou komprimované a mohou obsahovat informace o správě digitálních práv (DRM), aby se zabránilo neoprávněnému použití. Ne všechny prohlížeče však podporují EOT a obecně se nedoporučuje pro použití v moderních projektech.

Při použití vlastních písem v projektu je důležité vybrat formát souboru písem, který odpovídá potřebám projektu. To může zahrnovat faktory, jako je podpora cílové platformy, velikost souboru, licenční požadavky a podpora pokročilých typografických funkcí.

Import a použití souborů písem v React Native

Soubor s písmem si můžete stáhnout odkudkoli z internetu a importovat jej do svého osobního projektu React Native k použití. Nicméně, existuje mnoho dobrých, bezpečných webových stránek ke stažení bezplatných písem od bezpečně.

Chcete-li importovat soubor písma do projektu React Native, vytvořte soubor aktiva/fonty adresář v kořenovém adresáři vašeho projektu a přesuňte do něj soubory písem.

Kroky potřebné k použití vlastních písem se liší při práci s čistě projektem generovaným React Native nebo projektem React Native spravovaným Expo.

Reagovat Native CLI

Pokud pracujete s projektem generovaným React Native CLI, vytvořte a reagovat-native.config.js soubor a definujte v něm tato nastavení:

modul.exports = {
 projekt: {
 ios: {},
 android: {}
 },
 aktiva: [ './assets/fonts/' ],
}

Tato konfigurace říká projektu, aby zahrnoval prostředky písem uložené v "./assets/fonts/" adresář, aby k nim aplikace měla přístup při vykreslování textových prvků.

Poté můžete propojit aktiva složky do vašeho projektu spuštěním následujícího:

npx reakt-native-asset

npx reakt-nativní odkaz

Nyní můžete propojená vlastní písma používat jako obvykle ve svém stylu CSS tím, že zavoláte jejich přesný název ve stylu rodiny písem:

Ahoj světe!</Text>
konst styly = StyleSheet.create({
 fontText: {
 fontFamily: 'Tilt Prism',
 velikost písma: 20,
 },
});

Expo-CLI

U projektů generovaných Expo byste měli nainstalovat knihovnu expo-fonts jako závislost pro import a použití vlastních písem. Nainstalujte jej pomocí tohoto příkazu:

npx expo nainstalovat expo-font

Nyní můžete použít expo-fonty v souboru projektu takto:

import Reagovat, { useState, useEffect } z'reagovat';
import { Text, View, StyleSheet } z'react-native';
import * tak jako Písmo z'expo-font';
konst CustomText = (rekvizity) => {
konst [fontLoaded, setFontLoaded] = useState(Nepravdivé);
 useEffect(() => {
asynchronnífunkceloadFont() {
čekat Font.loadAsync({
'custom-font': vyžadovat('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(skutečný);
 }
 loadFont();
 }, []);
-li (!fontLoaded) {
vrátit se<Text>Načítání...Text>;
 }
vrátit se (
fontFamily: 'custom-font' }}>
 {props.children}
 </Text>
 );
};
konst Aplikace = () => {
vrátit se (

Ahoj světe!</CustomText>
 </View>
 );
};
konst styly = StyleSheet.create({
 kontejner: {
 flex: 1,
 justifyContent: 'centrum',
 alignItems: 'centrum',
 },
 text: {
 velikost písma: 24,
 váha písma: 'tučně',
 },
});
vývoznívýchozí Aplikace;

Výše uvedený blok kódu byste mohli lépe předělat a vylepšit použitím návrhový vzor kontejneru a prezentačních komponent.

Zde je výstup aplikací React Native CLI a Expo CLI:

Nastavení vlastního písma jako výchozího písma pro vaši aplikaci Expo

Možná budete chtít použít vlastní písmo jako výchozí písmo pro celou vaši aplikaci React Native, místo abyste je aplikovali na každou Text komponentu jednotlivě. Chcete-li to provést, můžete použít Text součástky defaultProps pro nastavení výchozí rodiny písem pro všechny Text komponenty ve vaší aplikaci.

Použijte Text.defaultProps vlastnost nastavit fontFamily vlastnost k názvu vašeho vlastního písma.

Zde je příklad:

import Reagovat, { useEffect } z'reagovat';
import { Text } z'react-native';
import * tak jako Písmo z'expo-font';
konst Aplikace = () => {
 useEffect(() => {
asynchronnífunkceloadFont() {
čekat Font.loadAsync({
'custom-font': vyžadovat('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'custom-font';
 }
 loadFont();
 }, []);
vrátit se (
Ahoj světe!</Text>
 );
};
vývoznívýchozí Aplikace;

Nastavení výchozí rodiny písem pomocí Text.defaultProps ovlivní pouze textové komponenty, které jsou vytvořeny po nastavení výchozího nastavení. Pokud jste již vytvořili textové komponenty před nastavením výchozí rodiny písem, budete ji muset nastavit fontFamily vlastnosti na tyto komponenty jednotlivě.

Vytvoření vlastní rodiny písem s více styly písem

Chcete-li vytvořit vlastní rodinu písem s více styly písem v aplikaci generované React Native CLI, musíte nejprve importovat soubory písem do svého projektu. Potom vytvořte vlastní objekt rodiny písem, který mapuje tloušťky a styly písem na jejich odpovídající cesty k souboru písem.

Například:

import { Text } z'react-native';
import CustomFonts z'../config/Fonts';
konst Aplikace = () => {
konst CustomFonts = {
'CustomFont-Regular': vyžadovat('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': vyžadovat('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': vyžadovat('../fonts/CustomFont-Italic.ttf'),
 };
asynchronní komponentDidMount() {
čekat Font.loadAsync (CustomFonts);
 }
vrátit se(

 Ahoj světe!
 </Text>
 );
};
konst styly = StyleSheet.create({
 text: {
 fontFamily: 'CustomFont-Regular',
 styl fontu: 'kurzíva',
 váha písma: 'tučně',
 velikost písma: 20,
 },
});
vývoznívýchozí Aplikace;

Všimněte si, že cesty a názvy souborů písem v tomto příkladu jsou pouze zástupné symboly a budete je muset nahradit vašimi skutečnými cestami a názvy souborů písem. Kromě toho musíte zajistit, aby byly vaše soubory vlastních písem správně importovány do vašeho projektu a že jejich cesty odpovídaly cestám definovaným v objektu rodiny písem.

Poslední myšlenky na vlastní písma v React Native

Vlastní písma mohou vaší aplikaci React Native dodat jedinečný a personalizovaný nádech. V tomto článku jsme probrali, jak používat vlastní písma v React Native, včetně importu souborů písem, nastavení vlastního písma jako výchozí písmo pro celou aplikaci, vytváření vlastní rodiny písem s více styly písem a načítání vlastních písem bez použití Expo.

Vždy zkontrolujte licenční omezení jakéhokoli písma, které používáte, a ujistěte se, že máte oprávnění je používat ve své aplikaci. Je také důležité mít na paměti, že načtení více vlastních písem může zvětšit velikost vaší aplikace, takže byste měli zahrnout pouze písma, která skutečně potřebujete.