Útmutató az egyéni betűtípusok használatához a React Native programban

A React Native számos alapértelmezett betűstílust kínál, amelyek közül választhat az alkalmazás elkészítésekor. Azonban ahhoz, hogy az alkalmazás eredetiségét és egyéniségét kínálja, amelyre szüksége van ahhoz, hogy kitűnjön a zsúfolt piacon, előfordulhat, hogy alkalmanként egyéni betűtípusokat kell használnia.

Tanuljuk meg, hogyan kell egyéni betűtípusokat alkalmazni a következő React Native projekt felépítésekor.

A betűtípus fájlformátumok megértése

A React Native segítségével egyéni betűtípus-fájlokat adhat hozzá egy projekthez, és testreszabhatja a szöveges elemek megjelenését az alkalmazásokban. Ezek az egyéni betűtípusok különböző fájlformátumú betűtípusfájlokban érkeznek. A fájlok egy adott betűtípushoz kódolt stílusinformációkat tartalmaznak.

A React Native mobilfejlesztés során használt leggyakoribb betűtípus-fájlformátumok:

• TrueType Font (TTF): Ez egy általános betűtípus-fájlformátum, amelyet a legtöbb operációs rendszer és alkalmazás támogat. A TTF fájlok viszonylag kicsik és sok karaktert tartalmazhatnak.
  instagram viewer
• OpenType Font (OTF): Hasonló a TTF-hez, de tartalmazhat fejlett tipográfiai szolgáltatásokat is. Az OTF-fájlok nagyobbak, mint a TTF-fájlok, és nem minden alkalmazás támogatja őket.
• Embedded OpenType Font (EOT): Az EOT-fájlok tömörítettek, és tartalmazhatnak digitális jogkezelési (DRM) információkat az illetéktelen használat megelőzése érdekében. Azonban nem minden böngésző támogatja az EOT-t, és általában nem ajánlott modern projektekben használni.

Ha egyéni betűtípusokat használ egy projektben, fontos, hogy olyan betűtípust válasszon fájlformátumot, amely megfelel a projekt igényeinek. Ez olyan tényezőket foglalhat magában, mint a célplatform támogatása, a fájlméret, a licenckövetelmények és a fejlett tipográfiai szolgáltatások támogatása.

Betűtípusfájlok importálása és alkalmazása a React Native alkalmazásban

Letölthet egy betűtípusfájlt az internet bárhonnan, és importálhatja azt a személyes React Native projektjébe. Azonban, Számos jó, biztonságos webhely található ingyenes betűtípusok letöltésére biztonságosan.

Betűtípusfájl importálásához a React Native projektbe hozzon létre egy eszközök/betűtípusok könyvtárba a projekt gyökerében, és helyezze át a fontfájlokat abba.

Az egyéni betűtípusok használatához szükséges lépések eltérőek lehetnek, ha tisztán React Native által generált projekttel vagy Expo által kezelt React Native projekttel dolgozik.

React Native CLI

Ha React Native CLI által generált projekttel dolgozik, hozzon létre egy react-native.config.js fájlt, és adja meg benne a következő beállításokat:

modult.exports = {
 projekt: {
 iOS: {},
 Android: {}
 },
 eszközök: [ './assets/fonts/' ],
}

Ez a konfiguráció utasítja a projektet, hogy vegye fel a következőben tárolt betűkészleteket "./assets/fonts/" könyvtárat, hogy az alkalmazás hozzáférhessen hozzájuk a szöveges elemek megjelenítése során.

Ezután linkelheti a eszközök mappába a projektbe a következő futtatásával:

npx react-native-asset

npx react-native link

Most már használhatja a hivatkozott egyéni betűtípusokat a szokásos módon a CSS-stílusban, a pontos nevük meghívásával a font-family stílusban:

Szia Világ!</Text>
const styles = StyleSheet.create({
 fontText: {
 betűtípus család: "Dönthető prizma",
 betűméret: 20,
 },
});

Expo-CLI

Expo által generált projektek esetén telepítenie kell az expo-fonts könyvtárat, mint függőséget az egyéni betűtípusok importálásához és alkalmazásához. Telepítse ezzel a paranccsal:

npx expo install expo-font

Most már használhatja az expo-fontokat a projektfájlban, például:

import React, { useState, useEffect } tól től'reagál';
import { Szöveg, Nézet, Stíluslap } tól től"react-native";
import * mint Betűtípus tól től"expo-font";
const CustomText = (kellékek) => {
const [fontLoaded, setFontLoaded] = useState(hamis);
 useEffect(() => {
asyncfunkcióloadFont() {
várja Font.loadAsync({
"egyedi betűtípus": igényelnek('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(igaz);
 }
 loadFont();
 }, []);
ha (!fontLoaded) {
Visszatérés<Szöveg>Betöltés...Szöveg>;
 }
Visszatérés (
betűtípus család: "egyedi betűtípus" }}>
 {props.children}
 </Text>
 );
};
const App = () => {
Visszatérés (

Helló világ!</CustomText>
 </View>
 );
};
const styles = StyleSheet.create({
 konténer: {
 Flex: 1,
 justifyContent: 'központ',
 alignItems: 'központ',
 },
 szöveg: {
 betűméret: 24,
 fontWeight: 'bátor',
 },
});
exportalapértelmezett App;

A fenti kódblokkot jobban átalakíthatja és javíthatja a konténer és prezentációs alkatrészek tervezési mintája.

Íme a React Native CLI és az Expo CLI alkalmazások kimenete:

Egyéni betűtípus beállítása az Expo alkalmazás alapértelmezett betűtípusaként

Érdemes lehet egyéni betűtípust használni alapértelmezett betűtípusként a teljes React Native alkalmazáshoz, ahelyett, hogy mindegyikre alkalmazná Szöveg komponens külön-külön. Ehhez használhatja a Szöveg alkatrészek defaultProps hogy beállítsa az alapértelmezett betűtípuscsaládot mindenkinek Szöveg komponenseket az alkalmazásban.

Használja a Text.defaultProps tulajdonság beállításához a betűtípus család tulajdonságot az egyéni betűtípus nevéhez.

Íme egy példa:

import React, { useEffect } tól től'reagál';
import { Szöveg } tól től"react-native";
import * mint Betűtípus tól től"expo-font";
const App = () => {
 useEffect(() => {
asyncfunkcióloadFont() {
várja Font.loadAsync({
"egyedi betűtípus": igényelnek('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "egyedi betűtípus";
 }
 loadFont();
 }, []);
Visszatérés (
Helló világ!</Text>
 );
};
exportalapértelmezett App;

Az alapértelmezett betűtípuscsalád beállítása a használatával Text.defaultProps csak azokat a szövegösszetevőket érinti, amelyek az alapértelmezett beállítása után jönnek létre. Ha az alapértelmezett betűtípuscsalád beállítása előtt már létrehozott Szöveg összetevőket, akkor be kell állítania a betűtípus család tulajdonságot külön-külön ezekre az összetevőkre.

Egyéni betűtípuscsalád létrehozása többféle betűstílussal

Ha egy React Native CLI által generált alkalmazásban több betűstílust tartalmazó egyéni betűtípuscsaládot szeretne létrehozni, először importálnia kell a fontfájlokat a projektbe. Ezután hozzon létre egy egyéni betűtípuscsalád-objektumot, amely leképezi a betűtípus súlyát és stílusát a megfelelő betűtípus-fájl elérési útjára.

Például:

import { Szöveg } tól től"react-native";
import Custom Fonts tól től'../config/Fonts';
const App = () => {
const CustomFonts = {
"Custom Font-Regular": igényelnek("../fonts/CustomFont-Regular.ttf"),
"Custom Font-Bold": igényelnek("../fonts/CustomFont-Bold.ttf"),
"Custom Font-Italic": igényelnek("../fonts/CustomFont-Italic.ttf"),
 };
async componentDidMount() {
várja Font.loadAsync (CustomFonts);
 }
Visszatérés(

 Helló Világ!
 </Text>
 );
};
const styles = StyleSheet.create({
 szöveg: {
 betűtípus család: "Custom Font-Regular",
 betű stílus: "dőlt",
 fontWeight: 'bátor',
 betűméret: 20,
 },
});
exportalapértelmezett App;

Vegye figyelembe, hogy ebben a példában a betűtípusfájl elérési útja és nevei csak helyőrzők, és ezeket le kell cserélnie a tényleges betűtípusfájl-elérési utakra és nevekre. Ezenkívül gondoskodnia kell arról, hogy az egyéni betűkészlet-fájlok megfelelően importálva legyenek a projektbe, és hogy elérési útjuk megegyezzen a betűtípuscsalád-objektumban meghatározottakkal.

Utolsó gondolatok az egyéni betűtípusokról a React Native alkalmazásban

Az egyéni betűtípusok egyedi és személyre szabott megjelenést adhatnak a React Native alkalmazásnak. Ebben a cikkben megvitattuk, hogyan használhatunk egyéni betűtípusokat a React Native programban, beleértve a betűtípusfájlok importálását, az egyéni betűtípusok beállítását az alapértelmezett betűtípus az egész alkalmazáshoz, egyéni betűtípuscsalád létrehozása több betűstílussal, és egyéni betűtípusok betöltése használat nélkül Expo.

Mindig ellenőrizze az Ön által használt betűtípusok licenckorlátozásait, és győződjön meg arról, hogy rendelkezik-e engedéllyel a használatára az alkalmazásban. Azt is fontos szem előtt tartani, hogy több egyéni betűtípus betöltése megnövelheti az alkalmazás méretét, ezért csak azokat a betűtípusokat használja, amelyekre valóban szüksége van.