Семейство шрифтов Roboto, легкие и жирные, в React Native.

Я вношу некоторые изменения в текст в своем родном приложении для реагирования: мне нужно указать Roboto light для абзацев и Roboto Bold для заголовков. Мне нужно, чтобы текст выглядел одинаково в приложениях для iOS и Android: поэтому мне нужно, чтобы он работал для обоих. Я пробовал эту строку кода.

text    : {
       fontFamily: 'sans-serif-light'
   },

но я получаю эту ошибку: введите здесь описание изображения

Я попробовал этот тип из официальной документации, и он отлично работает.

title   : {
       fontFamily: 'Cochin'
   },

--› Так что я думаю, что проблема в самом семействе шрифтов Roboto. Любая помощь?


react-native text fonts font-family roboto
person user3521011    schedule 04.05.2017    source источник

Ответы (5)


arrow_upward
11
arrow_downward

Чтобы добавить пользовательские шрифты в ваше приложение, сохраните все файлы ttf в каталоге. Добавьте следующий код в файл package.json.

"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }

Затем запустите react-native link Чтобы использовать шрифт, используйте то же имя в файле ttf в fontFamily.

person Roman Akash    schedule 04.05.2017

arrow_upward
9
arrow_downward

sans-serif-light и Roboto — шрифты только для Android. Вам нужны разные шрифты для iOS. В этом репозитории есть список шрифтов, доступных для iOS и Android — https://github.com/react-native-training/react-native-fonts

Вы можете использовать Platform.select() для выбора разных шрифтов для каждой ОС. :

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       android: { fontFamily: 'Roboto' }
  })
}
person RRikesh    schedule 04.05.2017
comment
Спасибо ... Итак, нет возможности использовать его как на iOS, так и на Android (потому что мне нужно, чтобы оба приложения были идентичными) ... я где-то читал, что могу добавить его вручную .ttf файл, а затем добавить в package.json, а затем запустите нативную ссылку реакции hiddentao.com/archives/2017/03/10/ .. Может ли это быть решением? - person user3521011; 04.05.2017
comment
Да, если вы хотите, чтобы использовался тот же шрифт, вы можете добавить его, в противном случае сохраните шрифты по умолчанию. - person RRikesh; 04.05.2017

arrow_upward
6
arrow_downward

Недавно у меня была такая же проблема. Оказывается, команда rnpm устарела, и вы можете добавлять пользовательские активы, используя конфигурацию React Native cli. https://github.com/react-native-community/cli/blob/master/docs/configuration.md

Чтобы добавить шрифты в проект:

  • Загрузите шрифт и поместите его в папку assets/fonts.

Создайте файл в корневом каталоге проекта как react-native.config.js Добавьте следующий код

module.exports={
    assets:[
        "./assets/fonts"
    ]
}

Беги react-native link

Запустите проект: npx react-native run-ios

Примечание. Если сборка для IOS завершилась неудачно, откройте настройки рабочей области xocde и измените систему сборки на Legacy Build System.

person Tanver Hasan    schedule 12.01.2020

arrow_upward
4
arrow_downward

Настройте Roboto для Android/iOS:

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

Поскольку Roboto является семейством шрифтов по умолчанию для Android. Мы можем добавить Roboto в iOS и просто использовать решение RRikesh, опуская fontFamily для Android:

import {
  Platform,
  StyleSheet,
} from 'react-native'

const stylesByPlatform = Platform.select({
  ios: { fontFamily: 'Roboto' },
  android: { },
})

export default StyleSheet.create({
  text: {
    ...stylesByPlatform,
    color: '#000000',
  },
})

Настраивать

Для iOS нам нужно добавить Roboto fontFamily:

  1. Загрузите шрифт Roboto из Google Fonts.
  2. Добавьте его в папку с вашими активами ./assets/fonts/Roboto

  3. Добавьте папку с ресурсами в файл package.json:

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

  4. Выполнить: react-native link (связывает файлы ttf на iOS и копирует их на Android)

  5. Удалить файлы Roboto, добавленные в android/app/src/main/assets/fonts
  6. Перестройте приложение и ????.

Я действительно не знаю, почему этого типа контента нет в официальных документах. :(

person Erick M. Sprengel    schedule 20.09.2019
comment
Большое спасибо за подробную прогулку - person Wasim Abuzaher; 07.10.2019

arrow_upward
3
arrow_downward

Если это может помочь, у меня была похожая проблема. Использование «react-native link» действительно ссылалось на шрифты в «Этапах сборки> Копировать ресурс пакета», но ничего не добавляло в файл Info.plist.

Добавление шрифтов в Info.plist решило проблему.

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>
person Benoit    schedule 30.11.2018