Pasirinktinių šriftų naudojimo „React Native“ vadovas

„React Native“ pateikia kelis numatytuosius šriftų stilius, kuriuos galite pasirinkti kuriant programą. Tačiau norėdami pasiūlyti savo programai originalumo ir individualumo, kurio reikia norint išsiskirti perpildytoje rinkoje, kartais gali tekti naudoti pasirinktinius šriftus.

Sužinokime, kaip pritaikyti pasirinktinius šriftus kuriant kitą React Native projektą.

Šrifto failų formatų supratimas

Naudodami „React Native“ galite prie projekto pridėti pasirinktinių šriftų failų ir tinkinti teksto elementų išvaizdą programose. Šie pasirinktiniai šriftai pateikiami skirtingų failų formatų šriftų failuose. Failuose yra užkoduota konkretaus šrifto šrifto stiliaus informacija.

Dažniausi šriftų failų formatai, kuriuos naudosite kurdami „React Native“ mobiliesiems, yra šie:

• „TrueType Font“ (TTF): tai įprastas šrifto failo formatas, kurį palaiko dauguma operacinių sistemų ir programų. TTF failai yra palyginti maži ir juose gali būti daug simbolių.
instagram viewer
• „OpenType Font“ (OTF): jis panašus į TTF, bet gali turėti ir išplėstinių tipografinių funkcijų. OTF failai yra didesni nei TTF failai ir ne kiekviena programa juos palaiko.
• Įdėtasis OpenType šriftas (EOT): EOT failai yra suglaudinti ir gali apimti skaitmeninių teisių valdymo (DRM) informaciją, kad būtų išvengta neteisėto naudojimo. Tačiau ne visos naršyklės palaiko EOT ir paprastai jos nerekomenduojama naudoti šiuolaikiniuose projektuose.

Kai projekte naudojate pasirinktinius šriftus, svarbu pasirinkti šrifto failo formatą, kuris atitiktų projekto poreikius. Tai gali būti susiję su tokiais veiksniais kaip tikslinės platformos palaikymas, failo dydis, licencijavimo reikalavimai ir pažangių tipografinių funkcijų palaikymas.

Šrifto failų importavimas ir taikymas „React Native“.

Galite atsisiųsti šrifto failą iš bet kurios interneto vietos ir importuoti jį į asmeninį „React Native“ projektą, kad galėtumėte naudoti. Tačiau yra daug gerų, saugių svetainių, kuriose galima atsisiųsti nemokamus šriftus nuo saugiai.

Norėdami importuoti šrifto failą į savo „React Native“ projektą, sukurkite turtas/šriftai katalogą, esantį projekto šaknyje, ir perkelkite į jį šriftų failus.

Veiksmai, kurių reikia norint naudoti pasirinktinius šriftus, skiriasi dirbant su grynai „React Native“ sugeneruotu projektu arba „Expo“ valdomu „React Native“ projektu.

Reaguoti Native CLI

Jei dirbate su React Native CLI sukurtu projektu, sukurkite a react-native.config.js failą ir jame nustatykite šiuos nustatymus:

modulis.exports = {
 projektas: {
 ios: {},
 Android: {}
 },
 turtas: [ './assets/fonts/' ],
}

Ši konfigūracija nurodo projektui įtraukti šrifto išteklius, saugomus "./assets/fonts/" katalogą, kad programa galėtų juos pasiekti, kai pateikia teksto elementus.

Tada galite susieti turto aplanką į savo projektą vykdydami šiuos veiksmus:

npx react-native-asset

npx react-native nuoroda

Dabar galite naudoti susietus tinkintus šriftus kaip įprastai naudodami CSS stilių, iškviesdami tikslų jų pavadinimą šriftų šeimos stiliumi:

Sveiki, pasauli!</Text>
konst styles = StyleSheet.create({
 šrifto tekstas: {
 šrifto šeima: "Tilt Prism",
 šrifto dydis: 20,
 },
});

Expo-CLI

„Expo“ sukurtų projektų atveju turėtumėte įdiegti „expo-fonts“ biblioteką kaip priklausomybę, kad galėtumėte importuoti ir taikyti pasirinktinius šriftus. Įdiekite jį naudodami šią komandą:

npx expo įdiegti expo-šriftą

Dabar savo projekto faile galite naudoti expo šriftus, pavyzdžiui:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { Tekstas, rodinys, stiliaus lapas } iš'react-native';
importuoti * kaip Šriftas iš"expo-font";
konst CustomText = (rekvizitai) => {
konst [fontLoaded, setFontLoaded] = useState(klaidinga);
 useEffect (() => {
asyncfunkcijaloadFont() {
laukti Font.loadAsync({
'priskirtas šriftas': reikalauti(„./assets/fonts/CustomFont.ttf“),
 });
 setFontLoaded(tiesa);
 }
 loadFont();
 }, []);
jeigu (!fontLoaded) {
grąžinti<Tekstas>Įkeliama...Tekstas>;
 }
grąžinti (
šrifto šeima: 'priskirtas šriftas' }}>
 {props.children}
 </Text>
 );
};
konst Programa = () => {
grąžinti (

Sveikas, pasauli!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 konteineris: {
 lankstus: 1,
 JustifyContent: 'centras',
 lygiuoti elementus: 'centras',
 },
 tekstas: {
 šrifto dydis: 24,
 šrifto svoris: "drąsus",
 },
});
eksportuotinumatytas Programėlė;

Galite geriau atnaujinti ir patobulinti aukščiau pateiktą kodo bloką, taikydami konteinerio ir prezentacinių komponentų dizaino modelis.

Čia yra „React Native CLI“ ir „Expo CLI“ programų išvestis:

Pasirinktinio šrifto nustatymas kaip numatytąjį jūsų „Expo“ programos šriftą

Galbūt norėsite naudoti pasirinktinį šriftą kaip numatytąjį visos „React Native“ programos šriftą, o ne taikyti jį kiekvienai Tekstas komponentas atskirai. Norėdami tai padaryti, galite naudoti Tekstas komponentas defaultProps norėdami nustatyti numatytąją šriftų šeimą visiems Tekstas programoje esančius komponentus.

Naudoti Text.defaultProps nuosavybė nustatyti šrifto šeima priskirto šrifto pavadinimą.

Štai pavyzdys:

importuoti Reaguoti, { useEffect } iš'reaguoti';
importuoti { Tekstas } iš'react-native';
importuoti * kaip Šriftas iš"expo-font";
konst Programa = () => {
 useEffect (() => {
asyncfunkcijaloadFont() {
laukti Font.loadAsync({
'priskirtas šriftas': reikalauti(„./assets/fonts/CustomFont.ttf“),
 });
 Text.defaultProps.style.fontFamily = 'priskirtas šriftas';
 }
 loadFont();
 }, []);
grąžinti (
Sveikas, pasauli!</Text>
 );
};
eksportuotinumatytas Programėlė;

Numatytosios šriftų šeimos nustatymas naudojant Text.defaultProps turės įtakos tik teksto komponentams, kurie sukurti nustačius numatytąjį. Jei jau sukūrėte teksto komponentus prieš nustatydami numatytąją šriftų šeimą, turėsite nustatyti šrifto šeima atskirų komponentų savybė.

Pasirinktinės šriftų šeimos su keliais šriftų stiliais kūrimas

Norėdami sukurti pasirinktinę šriftų šeimą su keliais šriftų stiliais React Native CLI sugeneruotoje programoje, pirmiausia turėsite importuoti šriftų failus į savo projektą. Tada sukurkite pasirinktinį šriftų šeimos objektą, susiejantį šriftų svorį ir stilius su atitinkamais šriftų failų keliais.

Pavyzdžiui:

importuoti { Tekstas } iš'react-native';
importuoti Custom Fonts iš„../config/Fonts“;
konst Programa = () => {
konst Custom Fonts = {
„Custom Font-Regular“: reikalauti(„../fonts/CustomFont-Regular.ttf“),
„Custom Font-Bold“: reikalauti(„../fonts/CustomFont-Bold.ttf“),
„Custom Font-Italic“: reikalauti(„../fonts/CustomFont-Italic.ttf“),
 };
async ComponentDidMount() {
laukti Font.loadAsync (CustomFonts);
 }
grąžinti(

 Labas pasauli!
 </Text>
 );
};
konst styles = StyleSheet.create({
 tekstas: {
 šrifto šeima: „Custom Font-Regular“,
 Šrifto stilius: "kursyvas",
 šrifto svoris: "drąsus",
 šrifto dydis: 20,
 },
});
eksportuotinumatytas Programėlė;

Atminkite, kad šiame pavyzdyje šrifto failų keliai ir pavadinimai yra tik rezervuotos vietos, todėl turėsite juos pakeisti tikrais šrifto failų keliais ir pavadinimais. Be to, turite užtikrinti, kad pasirinktiniai šriftų failai būtų tinkamai importuoti į projektą ir kad jų keliai atitiktų nurodytus šriftų šeimos objekte.

Paskutinės mintys apie pasirinktinius šriftus „React Native“.

Pasirinktiniai šriftai gali suteikti unikalią ir suasmenintą jūsų programą „React Native“. Šiame straipsnyje aptarėme, kaip naudoti pasirinktinius šriftus „React Native“, įskaitant šriftų failų importavimą, tinkinto šrifto nustatymą kaip numatytasis visos programos šriftas, sukurti pasirinktinę šriftų šeimą su keliais šriftų stiliais ir įkelti pasirinktinius šriftus nenaudojant Expo.

Visada patikrinkite bet kurio naudojamo šrifto licencijavimo apribojimus ir įsitikinkite, kad turite leidimą naudoti jį programoje. Taip pat svarbu nepamiršti, kad įkeliant kelis pasirinktinius šriftus gali padidėti programos dydis, todėl turėtumėte įtraukti tik tuos šriftus, kurių jums iš tikrųjų reikia.