react-native
Пользовательские шрифты

Шаги по использованию пользовательских шрифтов в React Native (Android)

1. Вставьте свой файл шрифтов внутри android/app/src/main/assets/fonts/font_name.ttf
2. Перекомпилируйте приложение Android, запустив react-native run-android
3. Теперь вы можете использовать fontFamily: 'font_name' в своих стилях React Native

Шаги по использованию пользовательских шрифтов в React Native (iOS)

1. Включите шрифт в проект Xcode.

2. Убедитесь, что они включены в колонку Целевой членский член

Нажмите на шрифт из навигатора и проверьте, включен ли этот шрифт.

3. Проверьте, включен ли шрифт в качестве ресурса в вашем комплекте

нажмите на файл проекта Xcode, выберите «Сформировать фазы», ​​выберите «Копировать ресурсы Bundle». Проверьте, добавлен ли ваш шрифт.

4. Включите шрифт в Application Plist (Info.plist)

из основной папки приложения откройте Info.plist, нажмите «Список информации о свойствах», а затем щелкните знак плюса (+). в раскрывающемся списке выберите «Шрифты, предоставляемые приложением».

5. Добавьте имя шрифта в Шрифты, предоставленные приложением

расширьте шрифты, предоставленные приложением, и добавьте имя шрифта точно в значение столбца

6. Используйте его в приложении

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

Пользовательские шрифты для Android и IOS

• Создайте папку в папке проекта и добавьте к ней свои шрифты. Пример:

  • Пример: здесь мы добавили папку в корне, называемую «mystuff», затем «fonts», и внутри нее мы разместили наши шрифты:
    • 

• Добавьте код ниже в package.json .

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • В приведенном выше примере наш пакет.json теперь будет иметь путь «mystuff / fonts»:

    "rnpm": {
      "assets": [
        "mystuff/fonts"
      ]
    }
    

• Запустите команду react-native link .

• Использование пользовательских шрифтов в проекте ниже кода

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  Где FONT-NAME - специфическая префиксная платформа.

  Android

  FONT-NAME - это слова перед расширением в файле. Пример. Имя файла вашего шрифта - Roboto-Regular.ttf , поэтому вы должны установить fontFamily: Roboto-Regular .

  IOS

  FONT-NAME - это «Полное имя», найденное после щелчка правой кнопкой мыши, в файле шрифта, затем щелкнув «Получить информацию». (Источник: https://stackoverflow.com/a/16788493/2529614 ), на скриншоте ниже, имя файла MM Proxima Nova Ultra bold.otf , однако «Полное имя» - «Proxima Nova Semibold», таким образом, вы set fontFamily: Proxima Nova Semibold . Скриншот -

• Запустите react-native run-ios react-native run-android или react-native run-android (это будет перекомпилировано с ресурсами)