Ръководство за използване на персонализирани шрифтове в React Native

React Native предоставя няколко стила на шрифт по подразбиране, от които да избирате, когато създавате вашето приложение. Въпреки това, за да предложите на приложението си оригиналността и индивидуалността, от които се нуждае, за да се открои на пренаселения пазар, понякога може да се наложи да използвате персонализирани шрифтове.

Нека научим как да прилагаме персонализирани шрифтове, когато създаваме следващия си проект React Native.

Разбиране на файловите формати на шрифтове

С React Native можете да добавяте персонализирани файлове с шрифтове към проект и да персонализирате външния вид на текстовите елементи във вашите приложения. Тези персонализирани шрифтове се предлагат във файлове с шрифтове с различни файлови формати. Файловете съдържат кодирана информация за стил за конкретен шрифт.

Най-често срещаните файлови формати на шрифтове, които ще използвате в мобилната разработка на React Native, са:

• Шрифт TrueType (TTF): Това е често срещан файлов формат на шрифт, който повечето операционни системи и приложения поддържат. TTF файловете са относително малки и могат да съдържат много знаци.
• Шрифт OpenType (OTF): Подобен е на TTF, но може да съдържа и разширени типографски функции. OTF файловете са по-големи от TTF файловете и не всяко приложение ги поддържа.
• Вграден шрифт OpenType (EOT): EOT файловете са компресирани и могат да включват информация за управление на цифрови права (DRM), за да се предотврати неоторизирана употреба. Въпреки това, не всички браузъри поддържат EOT и обикновено не се препоръчва за използване в съвременни проекти.

Когато използвате персонализирани шрифтове в проект, важно е да изберете файлов формат на шрифта, който отговаря на нуждите на проекта. Това може да включва фактори като поддръжка на целева платформа, размер на файла, изисквания за лицензиране и поддръжка за разширени типографски функции.

Импортиране и прилагане на файлове с шрифтове в React Native

Можете да изтеглите файл с шрифт от всяко място в интернет и да го импортирате във вашия личен React Native проект, за да го използвате. Въпреки това, има много добри и безопасни уебсайтове за изтегляне на безплатни шрифтове от сигурно.

За да импортирате файл с шрифт във вашия проект React Native, създайте активи/шрифтове директория в основата на вашия проект и преместете файловете с шрифтове в нея.

Стъпките, необходими за използване на персонализирани шрифтове, варират при работа с чисто генериран от React Native проект или управляван от Expo React Native проект.

React Native CLI

Ако работите с генериран от React Native CLI проект, създайте a реагират-native.config.js файл и дефинирайте тези настройки в него:

модул.exports = {
 проект: {
 ios: {},
 android: {}
 },
 активи: [ './assets/fonts/' ],
}

Тази конфигурация казва на проекта да включва активи на шрифтове, съхранени в "./assets/fonts/" директория, така че приложението да има достъп до тях, когато изобразява текстови елементи.

След това можете да свържете към активи към вашия проект, като изпълните следното:

npx react-native-asset

npx реакция-родна връзка

Сега можете да използвате свързаните персонализирани шрифтове, както обикновено бихте направили във вашия CSS стил, като извикате точното им име в стила на семейството шрифтове:

Здравей, свят!</Text>
конст стилове = StyleSheet.create({
 fontText: {
 шрифтово семейство: „Накланяща се призма“,
 размер на шрифта: 20,
 },
});

Експо-CLI

За проекти, генерирани от Expo, трябва да инсталирате библиотеката expo-fonts като зависимост за импортиране и прилагане на персонализирани шрифтове. Инсталирайте го с тази команда:

npx expo инсталирайте експо-шрифт

Сега можете да използвате експо-шрифтове във вашия проектен файл по следния начин:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране {Текст, изглед, стилова таблица} от"реагиране на родния";
импортиране * като Шрифт от'експо-шрифт';
конст CustomText = (реквизит) => {
конст [fontLoaded, setFontLoaded] = useState(невярно);
 useEffect(() => {
асинхроненфункцияloadFont() {
изчакайте Font.loadAsync({
'custom-font': изискват('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(вярно);
 }
 loadFont();
 }, []);
ако (!fontLoaded) {
връщане<Текст>Зареждане...Текст>;
 }
връщане (
шрифтово семейство: 'custom-font' }}>
 {props.children}
 </Text>
 );
};
конст Приложение = () => {
връщане (

Здравей, свят!</CustomText>
 </View>
 );
};
конст стилове = StyleSheet.create({
 контейнер: {
 гъвкав: 1,
 justifyContent: "център",
 подравняване на елементи: "център",
 },
 текст: {
 размер на шрифта: 24,
 fontWeight: "удебелен",
 },
});
износпо подразбиране Приложение;

Бихте могли да преработите и подобрите горния кодов блок по-добре, като приложите шаблон за дизайн на контейнери и презентационни компоненти.

Ето изхода както на React Native CLI, така и на Expo CLI приложенията:

Задаване на персонализиран шрифт като шрифт по подразбиране за вашето приложение Expo

Може да искате да използвате персонализиран шрифт като шрифт по подразбиране за цялото ви приложение React Native, вместо да го прилагате към всяко Текст компонент поотделно. За да направите това, можете да използвате Текст компоненти defaultProps за да зададете семейството шрифтове по подразбиране за всички Текст компоненти във вашето приложение.

Използвай Text.defaultProps свойство за задаване на шрифтово семейство свойство на името на вашия персонализиран шрифт.

Ето един пример:

импортиране Реагирайте, {useEffect} от"реагира";
импортиране { Текст } от"реагиране на родния";
импортиране * като Шрифт от'експо-шрифт';
конст Приложение = () => {
 useEffect(() => {
асинхроненфункцияloadFont() {
изчакайте Font.loadAsync({
'custom-font': изискват('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'custom-font';
 }
 loadFont();
 }, []);
връщане (
Здравей, свят!</Text>
 );
};
износпо подразбиране Приложение;

Задаване на семейството шрифтове по подразбиране Text.defaultProps ще засегне само текстови компоненти, които са създадени, след като е зададена стойността по подразбиране. Ако вече сте създали текстови компоненти, преди да зададете семейството шрифтове по подразбиране, ще трябва да зададете шрифтово семейство собственост върху тези компоненти поотделно.

Създаване на семейство персонализирани шрифтове с множество стилове на шрифтове

За да създадете персонализирано семейство шрифтове с множество стилове на шрифтове в приложение, генерирано от React Native CLI, първо ще трябва да импортирате файловете с шрифтове във вашия проект. След това създайте персонализиран обект на семейство шрифтове, който картографира теглата и стиловете на шрифта към съответните пътища на файла на шрифта.

Например:

импортиране { Текст } от"реагиране на родния";
импортиране CustomFonts от'../config/Fonts';
конст Приложение = () => {
конст CustomFonts = {
„CustomFont-Regular“: изискват('../fonts/CustomFont-Regular.ttf'),
„CustomFont-Bold“: изискват('../fonts/CustomFont-Bold.ttf'),
„CustomFont-Italic“: изискват('../fonts/CustomFont-Italic.ttf'),
 };
асинхронен componentDidMount() {
изчакайте Font.loadAsync (CustomFonts);
 }
връщане(

 Здравей свят!
 </Text>
 );
};
конст стилове = StyleSheet.create({
 текст: {
 шрифтово семейство: „CustomFont-Regular“,
 fontStyle: "курсив",
 fontWeight: "удебелен",
 размер на шрифта: 20,
 },
});
износпо подразбиране Приложение;

Обърнете внимание, че пътищата и имената на файловете с шрифтове в този пример са само контейнери и ще трябва да ги замените с вашите действителни пътища и имена на файлове с шрифтове. Освен това трябва да се уверите, че вашите персонализирани файлове с шрифтове са правилно импортирани във вашия проект и че пътищата им съвпадат с тези, дефинирани в обекта на вашето семейство шрифтове.

Последни мисли за персонализираните шрифтове в React Native

Персонализираните шрифтове могат да добавят уникален и персонализиран щрих към вашето приложение React Native. В тази статия обсъдихме как да използваме персонализирани шрифтове в React Native, включително импортиране на файлове с шрифтове, задаване на персонализиран шрифт като шрифта по подразбиране за цялото приложение, създаване на семейство персонализирани шрифтове с множество стилове на шрифтове и зареждане на персонализирани шрифтове без използване Експо.

Винаги проверявайте лицензионните ограничения за всеки шрифт, който използвате, и се уверете, че имате разрешение да го използвате в приложението си. Също така е важно да имате предвид, че зареждането на множество персонализирани шрифтове може да увеличи размера на вашето приложение, така че трябва да включвате само шрифтовете, от които действително се нуждаете.