Opas mukautettujen fonttien käyttämiseen React Nativessa

React Native tarjoaa useita oletuskirjasintyylejä, joista voit valita sovellusta rakennettaessa. Voit kuitenkin joskus joutua käyttämään mukautettuja kirjasimia, jotta voit tarjota sovelluksellesi sen omaperäisyyden ja yksilöllisyyden, jota se tarvitsee erottuakseen joukosta ruuhkaisilla markkinoilla.

Opitaan käyttämään mukautettuja kirjasimia, kun rakennat seuraavaa React Native -projektiasi.

Fonttitiedostomuotojen ymmärtäminen

React Nativen avulla voit lisätä mukautettuja kirjasintiedostoja projektiin ja muokata tekstielementtien ulkoasua sovelluksissasi. Nämä mukautetut kirjasimet tulevat kirjasintiedostoissa, joissa on eri tiedostomuotoja. Tiedostot sisältävät koodattuja tyylitietoja tietylle kirjasintyypille.

Yleisimmät React Native -mobiilikehityksessä käyttämäsi fonttitiedostomuodot ovat:

• TrueType Font (TTF): Tämä on yleinen fonttitiedostomuoto, jota useimmat käyttöjärjestelmät ja sovellukset tukevat. TTF-tiedostot ovat suhteellisen pieniä ja voivat sisältää useita merkkejä.
  instagram viewer
• OpenType Font (OTF): Se on samanlainen kuin TTF, mutta voi sisältää myös edistyneitä typografisia ominaisuuksia. OTF-tiedostot ovat suurempia kuin TTF-tiedostot, eivätkä kaikki sovellukset tue niitä.
• Embedded OpenType Font (EOT): EOT-tiedostot on pakattu ja ne voivat sisältää digitaalisten oikeuksien hallintatietoja (DRM) luvattoman käytön estämiseksi. Kaikki selaimet eivät kuitenkaan tue EOT: tä, eikä sitä yleensä suositella käytettäväksi nykyaikaisissa projekteissa.

Kun projektissa käytetään mukautettuja fontteja, on tärkeää valita fonttitiedostomuoto, joka vastaa projektin tarpeita. Tämä voi sisältää sellaisia ​​tekijöitä kuin kohdealustan tuki, tiedostokoko, lisenssivaatimukset ja edistyneiden typografisten ominaisuuksien tuki.

Fonttitiedostojen tuominen ja käyttäminen React Nativessa

Voit ladata fonttitiedoston mistä tahansa Internetistä ja tuoda sen henkilökohtaiseen React Native -projektiisi käytettäväksi. Kuitenkin, on monia hyviä, turvallisia verkkosivustoja ilmaisten fonttien lataamiseen turvallisesti.

Tuo fonttitiedosto React Native -projektiisi luomalla resurssit/fontit hakemistoon projektisi juuressa ja siirrä kirjasintiedostot siihen.

Mukautettujen kirjasimien käyttämiseen vaadittavat vaiheet vaihtelevat, kun työskentelet puhtaasti React Nativen luoman projektin tai Expon hallinnoiman React Native -projektin kanssa.

React Native CLI

Jos työskentelet React Native CLI: n luoman projektin kanssa, luo a react-native.config.js tiedosto ja määritä seuraavat asetukset sen sisällä:

moduuli.exports = {
 projekti: {
 ios: {},
 Android: {}
 },
 omaisuus: [ './assets/fonts/' ],
}

Tämä konfiguraatio käskee projektia sisällyttämään hakemistoon tallennetut fonttivarat "./assets/fonts/" hakemistoon, jotta sovellus voi käyttää niitä hahmontaessaan tekstielementtejä.

Voit sitten linkittää omaisuutta kansio projektiisi suorittamalla seuraava:

npx react-native-asset

npx react-natiivi linkki

Nyt voit käyttää linkitettyjä mukautettuja kirjasimia tavalliseen tapaan CSS-tyylissäsi kutsumalla niiden tarkkaa nimeä font-family-tyylillä:

Hei maailma!</Text>
konst styles = StyleSheet.create({
 fontText: {
 fontFamily: "Tilt Prism",
 Fonttikoko: 20,
 },
});

Expo-CLI

Expo-luomissa projekteissa sinun tulee asentaa expo-fonts-kirjasto riippuvuutena mukautettujen kirjasimien tuontia ja käyttöä varten. Asenna se tällä komennolla:

npx expo asenna expo-font

Nyt voit käyttää expo-fontteja projektitiedostossasi seuraavasti:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { Teksti, näkymä, tyylitaulukko } alkaen'react-native';
tuonti * kuten Fontti alkaen'expo-font';
konst Mukautettu teksti = (rekvisiitta) => {
konst [fontLoaded, setFontLoaded] = useState(väärä);
 useEffect(() => {
asynktoimintoloadFont() {
odottaa Font.loadAsync({
"muokattu kirjasin": vaatia('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(totta);
 }
 loadFont();
 }, []);
jos (!fontLoaded) {
palata<Teksti>Ladataan...Teksti>;
 }
palata (
fontFamily: "muokattu kirjasin" }}>
 {props.children}
 </Text>
 );
};
konst Sovellus = () => {
palata (

Hei maailma!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 kontti: {
 flex: 1,
 perustellaContent: 'keskusta',
 alignItems: 'keskusta',
 },
 teksti: {
 Fonttikoko: 24,
 fontin paino: 'lihavoitu',
 },
});
viedäoletuksena Sovellus;

Voit uudistaa ja parantaa yllä olevaa koodilohkoa paremmin soveltamalla kontti- ja esittelykomponenttien suunnittelukuvio.

Tässä on sekä React Native CLI- että Expo CLI -sovellusten tulos:

Mukautetun fontin asettaminen Expo-sovelluksesi oletusfontiksi

Voit halutessasi käyttää mukautettua kirjasinta oletusfonttina koko React Native -sovelluksellesi sen sijaan, että käyttäisit sitä jokaisessa Teksti komponentti erikseen. Voit tehdä tämän käyttämällä Teksti komponentin defaultProps asettaaksesi oletuskirjasinperheen kaikille Teksti sovelluksesi komponentit.

Käytä Text.defaultProps ominaisuus asettaa fontFamily ominaisuuden mukautetun kirjasimen nimeen.

Tässä on esimerkki:

tuonti Reagoi, { useEffect } alkaen'reagoi';
tuonti { Teksti } alkaen'react-native';
tuonti * kuten Fontti alkaen'expo-font';
konst Sovellus = () => {
 useEffect(() => {
asynktoimintoloadFont() {
odottaa Font.loadAsync({
"muokattu kirjasin": vaatia('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "muokattu kirjasin";
 }
 loadFont();
 }, []);
palata (
Hei maailma!</Text>
 );
};
viedäoletuksena Sovellus;

Oletuskirjasinperheen asettaminen käyttämällä Text.defaultProps vaikuttaa vain tekstikomponentteihin, jotka on luotu oletusarvon määrittämisen jälkeen. Jos olet jo luonut tekstikomponentteja ennen oletuskirjasinperheen asettamista, sinun on määritettävä fontFamily ominaisuutta kyseisiin komponentteihin erikseen.

Mukautetun kirjasinperheen luominen useilla kirjasintyyleillä

Jos haluat luoda mukautetun kirjasinperheen useilla kirjasintyyleillä React Native CLI: n luomassa sovelluksessa, sinun on ensin tuotava kirjasintiedostot projektiisi. Luo sitten mukautettu kirjasinperheobjekti, joka yhdistää kirjasinten painot ja tyylit vastaaviin kirjasintiedostopolkuihin.

Esimerkiksi:

tuonti { Teksti } alkaen'react-native';
tuonti Mukautetut kirjasimet alkaen'../config/Fonts';
konst Sovellus = () => {
konst Mukautetut kirjasimet = {
"CustomFont-Regular": vaatia('../fonts/CustomFont-Regular.ttf'),
"CustomFont-Bold": vaatia('../fonts/CustomFont-Bold.ttf'),
"CustomFont-Italic": vaatia('../fonts/CustomFont-Italic.ttf'),
 };
asynk componentDidMount() {
odottaa Font.loadAsync (CustomFonts);
 }
palata(

 Hei maailma!
 </Text>
 );
};
konst styles = StyleSheet.create({
 teksti: {
 fontFamily: "CustomFont-Regular",
 fonttityyli: "kursivointi",
 fontin paino: 'lihavoitu',
 Fonttikoko: 20,
 },
});
viedäoletuksena Sovellus;

Huomaa, että tässä esimerkissä kirjasintiedostojen polut ja nimet ovat vain paikkamerkkejä, ja sinun on korvattava ne omilla kirjasintiedostopoluillasi ja nimilläsi. Lisäksi sinun on varmistettava, että mukautetut kirjasintiedostot on tuotu oikein projektiisi ja että niiden polut vastaavat kirjasinperheobjektissa määritettyjä polkuja.

Viimeisiä ajatuksia mukautetuista fonteista React Nativessa

Mukautetut kirjasimet voivat lisätä React Native -sovellukseesi ainutlaatuisen ja yksilöllisen ilmeen. Tässä artikkelissa olemme keskustelleet mukautettujen kirjasimien käyttämisestä React Nativessa, mukaan lukien kirjasintiedostojen tuominen, mukautetun kirjasimen asettaminen oletusfontti koko sovellukselle, luoda mukautettu kirjasinperhe, jossa on useita kirjasintyylejä, ja ladata mukautettuja kirjasimia käyttämättä Expo.

Tarkista aina käyttämäsi kirjasimen lisenssirajoitukset ja varmista, että sinulla on lupa käyttää sitä sovelluksessasi. On myös tärkeää muistaa, että useiden mukautettujen fonttien lataaminen voi suurentaa sovelluksesi kokoa, joten sinun tulee sisällyttää vain ne kirjasimet, joita todella tarvitset.