Ответ 1

Это потому, что по умолчанию у iOS нет шрифта Roboto.

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

Как только вы это сделали, у вас не должно возникнуть проблемы с использованием JS.

Ответ 2

• Создайте новую группу Fonts в рамках проекта Xcode

• Перетащите шрифты из Finder в группу Fonts, которую вы только что создали, и проверьте свое имя проекта в списке Добавить в список задач

• Разверните папку имени проекта в основной директории вашего проекта и откройте Info.plist

• Добавить Fonts provided by application в качестве нового ключа

• Добавить новый элемент под Fonts provided by application и установить значение элемента для полного имени шрифта с расширением для каждого шрифта, который вы добавили в папку шрифтов

  • то есть. если имя файла шрифта OpenSans-ExtraBold.ttf, то это должно быть значение элемента.

• Чтобы использовать шрифт в React Native, просто установите атрибут стиля fontFamily для элемента (см. this). Обратите внимание, что стиль должен использовать имя шрифта, а не имя файла.

  • например. в приведенном выше примере атрибут стиля будет fontFamily: 'Open Sans'

• Запустите Shift + Command + K, чтобы очистить последнюю сборку

• Затем Command + B, чтобы начать новую сборку

• И, наконец, Command + R для запуска приложения

Если вы все еще видите ошибку Непризнанная семья шрифтов перезапускает ваш реактивный упаковщик.

https://github.com/alucic/react-native-cheat-sheet

Надеюсь, что это поможет!

Ответ 3

UPDATE

Теперь вам не нужно устанавливать rnpm вручную. После первого шага, на втором шаге, вы можете просто использовать команду react-native link, и все ваши активы будут связаны. rnpm теперь сливается с реакцией-naitve. Оформить эту фиксацию в RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70

Существует более простой способ делать вещи через rnpm. Он добавляет шрифты как для Android, так и для ios. Поместите шрифт, который вы хотите добавить, в подходящее место в каталоге проекта. В вашем package.json просто добавьте следующее:

step1

...
    "rnpm": {
          "assets": ["path/to/your/font/directory"]
    },
...

step2

Затем из командной строки выполните: rnpm link

теперь вы можете счастливо использовать свои шрифты в своем приложении.

Примечание. Для этого вам необходимо установить rnpm. Просто сделайте npm install -g rnpm

Вот документация: https://github.com/rnpm/rnpm#advanced-usage

Ответ 4

Ответ от Aakash правильный.

Метод:

• Добавьте свой шрифт в папку в своем проекте, посвящённом реакции.
• Добавьте к package.json следующие

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

3. запустите react-native link в терминале

Необязательно:

• добавить rnpm с помощью npm install -g rnpm
• run rnpm link

Использование примера

• Я помещаю myFont.ttf в папку, путь которой (относительно package.json) . /src/assets/fonts
• Я поместил следующий код в файл package.json

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

3. Я запускаю терминал

реакция-родная ссылка

4. Я использую его в элементе Text в native-native следующим образом: (без пробела после первого < и без пробела перед последним > )

< Text style = {{fontFamily: myFont}} > Привет, MyFont! </Текст >

Изображения: package.json link

Спасибо за отличный ответ Аакаш, надеюсь, вы не возражаете против повторной разбивки на noobs, как я там!

Ответ 5

Здесь есть много ответов для реагирующей версии & lt; 0.60

Для тех, кто использует реактивную версию> 0.60, 'rnpm' is deprecated и пользовательские шрифты не будут работать.

Теперь, чтобы добавить собственный шрифт в собственную версию реакции> 0.60, вам необходимо:

1- Создайте файл с именем react-native.config.js в корневой папке вашего проекта.

2- добавьте это в этот новый файл

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

3- выполните команду react-native link в корневом пути проекта.

PS Перед запуском команды react-native link убедитесь, что у вас есть правильный путь к папке со шрифтами

Ответ 6

Если вы используете приложение Create React Native, при запуске react-native link вы увидите следующее:

react-native link нельзя использовать в приложении "Создать React Native". проекты. Если вам нужно включить библиотеку, которая опирается на пользовательские нативный код, возможно, вам придется сначала извлечь. Видеть https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md для получения дополнительной информации.

Если все, что вы пытаетесь сделать, это добавить пользовательские шрифты вместо извлечения, вы можете использовать Expo, которая также включена по умолчанию в CRNA. По сути, вы делаете:

await Font.loadAsync({
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});

Кроме того, вы можете использовать только отформатированные шрифты ttf или otf, но не шрифты ttc: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Вот подробный документ от Экспо: https://docs.expo.io/versions/latest/guides/using-custom-fonts

Ответ 7

1. добавьте файлы шрифтов (например, .otf ИЛИ .ttf) в папку root/assets/font в своем проекте.

2. в package.json: rnpm: "assets": ["./assets/font"],

   3. если после сборки ваши шрифты не поддерживаются, добавьте этот файл на корневом уровне:

реагируют-native.config.js

 module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts']
    };

4. например: имя-шрифта → Robotto-Regular.ttf затем используйте его, как показано ниже, в стилях:

fontFamily: 'Robotto-Regular'

5. запустить реагирующую ссылку
6. Затем на стороне Android (Android Studio) и IOS стороне (XCode) синхронизировать проект.
7. запустить реагировать-родной запустить-Android ИЛИ реагировать-родной запустить-IOS

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