Следуйте разумным принципам типографики и добавьте индивидуальности своему приложению с помощью пользовательского шрифта.

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

Давайте узнаем, как применять пользовательские шрифты при создании вашего следующего проекта React Native.

Понимание форматов файлов шрифтов

С помощью React Native вы можете добавлять в проект файлы пользовательских шрифтов и настраивать внешний вид текстовых элементов в своих приложениях. Эти пользовательские шрифты поставляются в файлах шрифтов с различными форматами файлов. Файлы содержат закодированную информацию о стилях для определенной гарнитуры шрифта.

Наиболее распространенные форматы файлов шрифтов, которые вы будете использовать в мобильной разработке React Native:

  • Шрифт TrueType (TTF): это распространенный формат файла шрифта, поддерживаемый большинством операционных систем и приложений. Файлы TTF относительно малы и могут содержать много символов.
    instagram viewer
  • Шрифт OpenType (OTF): он похож на TTF, но также может содержать расширенные типографские функции. Файлы OTF больше, чем файлы TTF, и не каждое приложение их поддерживает.
  • Встроенный шрифт OpenType (EOT): файлы EOT сжаты и могут включать информацию об управлении цифровыми правами (DRM) для предотвращения несанкционированного использования. Однако не все браузеры поддерживают EOT, и его обычно не рекомендуется использовать в современных проектах.

При использовании пользовательских шрифтов в проекте важно выбрать формат файла шрифта, соответствующий потребностям проекта. Это может включать такие факторы, как поддержка целевой платформы, размер файла, требования к лицензированию и поддержка расширенных типографских функций.

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

Вы можете загрузить файл шрифта из любого места в Интернете и импортировать его в свой личный проект React Native для использования. Однако, есть много хороших и безопасных сайтов для скачивания бесплатных шрифтов от надежно.

Чтобы импортировать файл шрифта в проект React Native, создайте активы/шрифты каталог в корне вашего проекта и переместите в него файлы шрифтов.

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

Реагировать на собственный интерфейс командной строки

Если вы работаете с проектом, сгенерированным React Native CLI, создайте реагировать-native.config.js файл и определите эти настройки внутри него:

модуль.экспорт = {
 проект: {
 iOS: {},
 андроид: {}
 },
 ресурсы: [ './активы/шрифты/' ],
}

Эта конфигурация указывает проекту включить ресурсы шрифта, хранящиеся в "./активы/шрифты/" каталог, чтобы приложение могло получить к ним доступ при рендеринге текстовых элементов.

Затем вы можете связать ресурсы папку в свой проект, выполнив следующее:

npx реагировать-родной-актив

Это будет работать только в более новых версиях приложений React Native, начиная с 0,69. Вместо этого в старых проектах React Native следует запускать эту команду:

npx реактивная нативная ссылка

Теперь вы можете использовать связанные пользовательские шрифты, как обычно, в стиле CSS, вызывая их точное имя в стиле семейства шрифтов:

Привет, Мир!</Text>
константа стили = Таблица стилей.create({
 шрифтТекст: {
 семейство шрифтов: «Наклонная призма»,
 размер шрифта: 20,
 },
});

Экспо-ЦЛИ

Для проектов, созданных Expo, вы должны установить библиотеку expo-fonts в качестве зависимости для импорта и применения пользовательских шрифтов. Установите его с помощью этой команды:

npx expo установить экспо-шрифт

Теперь вы можете использовать expo-шрифты в файле вашего проекта следующим образом:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать { Текст, вид, таблица стилей } от«реагирующий нативный»;
Импортировать * как Шрифт от'экспо-шрифт';
константа Пользовательский текст = (реквизит) => {
константа [fontLoaded, setFontLoaded] = useState(ЛОЖЬ);


 использоватьЭффект(() => {
асинхронныйфункцияloadFont() {
Ждите Шрифт.loadAsync({
'пользовательский шрифт': требовать('./активы/шрифты/CustomFont.ttf'),
 });


 установить шрифт загруженный (истинный);
 }


 загрузить шрифт();
 }, []);


если (! шрифт загружен) {
возвращаться<Текст>Загрузка...Текст>;
 }


возвращаться (
семейство шрифтов: 'пользовательский шрифт' }}>
 {реквизиты.дети}
 </Text>
 );
};


константа Приложение = () => {
возвращаться (

Привет, мир!</CustomText>
 </View>
 );
};


константа стили = Таблица стилей.create({
 контейнер: {
 гибкий: 1,
 выравнивание содержимого: 'центр',
 выравнивание элементов: 'центр',
 },
 текст: {
 размер шрифта: 24,
 Вес шрифта: 'смелый',
 },
});
экспортпо умолчанию Приложение;

Вы можете лучше переработать и улучшить приведенный выше блок кода, применив шаблон проектирования контейнеров и презентационных компонентов.

Вот вывод приложений React Native CLI и Expo CLI:

2 изображения

Установка пользовательского шрифта в качестве шрифта по умолчанию для вашего приложения Expo

Вы можете использовать собственный шрифт в качестве шрифта по умолчанию для всего вашего приложения React Native, а не применять его к каждому Текст компонент по отдельности. Для этого можно использовать Текст компоненты defaultProps установить семейство шрифтов по умолчанию для всех Текст компоненты в вашем приложении.

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

Вот пример:

Импортировать Реагируйте, {useEffect} от«реагировать»;
Импортировать { Текст } от«реагирующий нативный»;
Импортировать * как Шрифт от'экспо-шрифт';
константа Приложение = () => {
 использоватьЭффект(() => {
асинхронныйфункцияloadFont() {
Ждите Шрифт.loadAsync({
'пользовательский шрифт': требовать('./активы/шрифты/CustomFont.ttf'),
 });


 Text.defaultProps.style.fontFamily = 'пользовательский шрифт';
 }


 загрузить шрифт();
 }, []);


возвращаться (
Привет, мир!</Text>
 );
};
экспортпо умолчанию Приложение;

Установка семейства шрифтов по умолчанию с помощью Text.defaultProps повлияет только на текстовые компоненты, созданные после установки значения по умолчанию. Если вы уже создали текстовые компоненты перед установкой семейства шрифтов по умолчанию, вам необходимо установить семейство шрифтов собственности на эти компоненты по отдельности.

Создание пользовательского семейства шрифтов с несколькими стилями шрифтов

Чтобы создать собственное семейство шрифтов с несколькими стилями шрифтов в приложении, сгенерированном React Native CLI, вам сначала необходимо импортировать файлы шрифтов в свой проект. Затем создайте собственный объект семейства шрифтов, который сопоставляет веса и стили шрифтов с соответствующими путями к файлам шрифтов.

Например:

Импортировать { Текст } от«реагирующий нативный»;
Импортировать Пользовательские шрифты от'../config/Шрифты';
константа Приложение = () => {
константа Пользовательские шрифты = {
«Пользовательский шрифт — обычный»: требовать('../шрифты/CustomFont-Regular.ttf'),
'Пользовательский шрифт-полужирный': требовать('../шрифты/CustomFont-Bold.ttf'),
«Пользовательский шрифт — курсив»: требовать('../шрифты/CustomFont-Italic.ttf'),
 };


асинхронный компонентDidMount () {
Ждите Font.loadAsync (CustomFonts);
 }


возвращаться(

 Привет, мир!
 </Text>
 );
};


константа стили = Таблица стилей.create({
 текст: {
 семейство шрифтов: «Пользовательский шрифт — обычный»,
 стиль шрифта: курсив,
 Вес шрифта: 'смелый',
 размер шрифта: 20,
 },
});
экспортпо умолчанию Приложение;

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

Заключительные мысли о пользовательских шрифтах в React Native

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

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