Рубрики
Без рубрики

Как настроить шрифты в Native

Введение в RootStrap, мое первое задание было разработать нативное приложение React, … Tagged with React, Tuperial, JavaScript, Fontfamily.

Вступление

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

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

Обзор

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

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

Конфигурация

Создать проект

Прежде всего, вы должны создать проект в React Native. Для этого откройте терминал и перейдите к папке, в которой вы хотите создать свой проект, и выполнить:

react-native init customize_fonts_react_native_tutorial

Установить библиотеки

После создания проекта необходимо установить некоторые библиотеки:

cd customize_fonts_react_native_tutorial
npm install --save react-native-global-props
npm install --save babel-plugin-module-resolver

Скачать и переименовать шрифты

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

Есть много мест, где вы можете получить эти индивидуальные шрифты. Для этого урока я использовал два разных шрифта, Goodfeelingsans и Dan’sdisney Анкет В обоих случаях я закончил с файлом .ttf.

В iOS важно, чтобы имя файла шрифта было таким же, как и его имя PostScript. Чтобы найти имя PostScript, откройте свое ttf Файл с помощью книги шрифта, см. Имя его PostScript, и переименовать в него шрифт.

Конфигурации в реагировании нативно

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

Общий

В обоих случаях вам нужно будет создать эти папки в корне вашего проекта: SRC/Активы/Шрифты Анкет Внутри папки шрифтов вы должны добавить свои пользовательские шрифты .ttf Файлы, один для каждого шрифта, который вы хотите использовать.

Также изменить Babel.config.js Добавление этого кода:

plugins: [
    [
      'module-resolver',
      {
        alias: {
          assets: './src/assets',
        },
      },
    ],
  ],

Android

В Android вам нужно добавить эти папки в Android/App/SRC/Main/: активы/шрифты . Вы также должны добавить свой ttf Файлы в папку шрифтов.

ios

В iOS конфигурация немного сложнее. Тебе нужно перейти к ios/ Папка и откройте CAMITIZE_FONTS_REACT_NAITE_TUTORIAL.XCODEPROJ Файл с XCODE.

После этого вам нужно нажать на CANDEIZE_FONTS_REACT_NAITY_TUTORIAL -> Фазы сборки и найти Копировать пакет ресурсов раздел.

Вы должны добавить свои шрифты, нажав символ плюса, затем Добавьте другие … Опция, выберите свои шрифты в папке SRC/Assets/Fonts и Финиш Анкет

использование

Наконец, после всех этих шагов вы сможете использовать пользовательские шрифты в своем нативном проекте React.

В качестве примера вы можете создать очень простой экран, просто чтобы проверить все, настроено правильно. Добавьте в src folder app.js и файлы styles.js.

App.js:

import React from 'react';
import {SafeAreaView, Text, TextInput} from 'react-native';
import {setCustomText, setCustomTextInput} from 'react-native-global-props';
import styles from './styles';

const App = () => {
  const customTextProps = {
    style: {
      fontFamily: 'GoodFeelingSans',
    },
  };

  setCustomText(customTextProps);
  setCustomTextInput(customTextProps);

  return (
    
      How to Customize Fonts in React Native
      
        This is the default font (GoodFeelingSans)
      
      
        This is a different font (DansDisneyUI)
      
      
      
    
  );
};

export default App;

styles.js:

import {StyleSheet} from 'react-native';

const differentFont = "Dan'sDisneyUI";

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'space-around',
  },

  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 15,
    textAlign: 'center',
  },

  inputDifferentFont: {
    fontFamily: differentFont,
  },

  textDefaultFont: {
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },

  textDifferentFont: {
    fontFamily: differentFont,
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },
});

export default styles;

Также измените index.js указывать на новый ./src/app вместо ./app.

В этом приложении вы используете React-Clobal-Props Библиотека, чтобы установить пользовательский шрифт по умолчанию, если у вас есть целое приложение с некоторым шрифтом по умолчанию. Это не обязательно, если вам это не нужно, вы можете просто установить пользовательский шрифт только в нужных текстах. Обратите внимание, как вы все еще можете сделать это, даже если вы определите пользовательский шрифт по умолчанию. Также обратите внимание, что существует два разных настройки по умолчанию, одна для текстового компонента, а другая для TextInput.

Теперь, если вы выполняете React-Cnive Run-IOS или React-Cnive Run-Android Вы должны увидеть текст своими пользовательскими шрифтами.

Ошибка iOS “не распознанная семья шрифтов”

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

Во -первых, вы должны проверить свой info.plist Файл, расположенный в iOS/CANDIIZE_FONTS_REACT_NAITY_TUTORIOR папка. Этот файл должен иметь раздел с ключом Uiappfonts Это содержит множество струн с вашими шрифтами. Если это не хватает, то вы должны добавить это:

UIAppFonts
    
        GoodFeelingSans.ttf
        Dan'sDisneyUI.ttf

Если в вашем проекте есть несколько целей сборки, вы должны применить это изменение к их соответствующему info.plist файлы

После этого, если вы все еще получаете ошибку, вы можете попробовать сделать (или все) из перечисленных ниже:

  • Приложение удаления от симулятора (или устройства)
  • Удалить node_modules Папка, Package-lock.json Файл и выполнить NPM Установка
  • В ios Папка удалить Стручки Папка, Podfile.lock Файл и выполнять Установка стручка
  • Сбросить кеш путем запуска NPM Start-Reset-Cache командование

Я надеюсь, что после того, как все это сделает, теперь у вас работают новые пользовательские шрифты!

Резюме

В этом уроке вы узнали, как добавлять, ссылаться и использовать пользовательские шрифты в Rayact Native. Вы можете найти проект GitHub Здесь Анкет

Если вам это понравилось, вы можете проверить это и больше статей в Блог RootStrap

Оригинал: “https://dev.to/manuviola77/how-to-customize-fonts-in-react-native-98k”

Читайте ещё по теме: