React Native Custom Icon Font для NativeBase
Принято с: https://medium.com/@kelleyannerose/react-native-custom-icon-font-with-no-sad-red-screen-72b8d09a0e7b
Это то, что у меня сработало:)
Шаг 0: Установить и связать React Native Vector Icons Убедитесь, что у вас установлены и связаны Resact-Native Vector Icons.Если вы еще не установили его, следуйте инструкциям по установке из их документов.Обычно эти две команды должны сделать это за вас.
npm install react-native-vector-icons --save
react-native link
Шаг 1: Добавление значков в Fontello Во-первых, вы должны вставить свои значки в шрифт.Перейдите на fontello.com , и, как точно указывает их пользовательский интерфейс, «перетащите сюда иконки SVG или шрифт SVG».
Шаг 2: Выбор значков Это может быть не так очевидно, но после загрузки значков вы должны выбрать, который хотите включить (по одному).Это хорошо, потому что вы можете выбирать иконки из других библиотек, если хотите, и все они будут частью вашего шрифта с одним значком.Вы четко увидите свой выбор красным кружком.
ШАГ 3 / БОЛЬШОЙ СОВЕТ: ИМЯ ВАШЕШрифт Я рекомендую назвать ваш шрифт в маленьком окошке рядом с большой красной кнопкой в Fontello.Таким образом, не будет никаких вопросов о том, как называется ваш шрифт.И имя файла будет соответствовать имени шрифта, так что вы можете использовать одно и то же имя в iOS и Android, оставляя меньше места для ошибок - фу.
Шаг 4: Загрузка веб-шрифта Нажмите красную кнопку «Скачать веб-шрифт» в правом верхнем углу.Вы можете получить файл конфигурации самостоятельно, нажав стрелку вниз, но вам также понадобится файл .ttf.
Шаг 5: Добавление файла .ttf в проект Найдите файл .ttf в каталоге шрифтов из вашей загрузки и добавьте его где-нибудь в файл src, который имеет смысл.У меня обычно есть каталог src/assets/fonts, который я использую.Мне нравится, чтобы этот файл был доступен где-то в общем файле для моего собственного здравомыслия.
Шаг 6 (iOS): Добавление .ttf к ресурсам в Xcode Откройте проект в Xcodeios/yourprojectname.xcodeproj.Оказавшись в XCode, щелкните правой кнопкой мыши на каталоге ресурсов, выберите «Добавить файлы к« yourprojectname »…» и выберите файл .ttf с пользовательским значком шрифта (у меня есть мой доступный в этом каталоге src/assets/fonts, который я упомянул на шаге 5).
Шаг 7 (iOS): ДОБАВИТЬ ШРИФТ ДЛЯ КОПИРОВАНИЯ РЕСУРСОВ BUNDLE Пока вы находитесь в Xcode, перейдите в «Фазы сборки» в верхней панели, откройте «Копировать ресурсы комплекта» и выУвидим список шрифтов значков из реактивных-векторных-значков.Проверьте название шрифта вашего значка в этом списке, если его там нет, нажмите «+» и выберите ваш файл .ttf.
Шаг 8 (iOS) : ДОБАВИТЬ В INFO.PLIST Откройте файл info.plist (желательно, прежде чем добавлять какие-либо дополнительные цели, потому что это будет info.plist, который будет скопирован) и откройте «Предоставленные шрифты».по заявке.Нажмите на маленький кружок «+».Он добавит строку вверху для ввода имени файла шрифта.
Шаг 9 (Android): Добавить .ttf в Android Добавьте файл .ttf в каталог android/app/src/main/assets/fonts.Это должно уже существовать, потому что вы уже установили react-native-vector-icons и запустили react-native link, который помещает все файлы шрифтов его значков здесь для Android.
Шаг 10: Добавление конфигурации иКомпонент значка вашего проекта Вернуться в общую директорию src!Добавьте два файла где-нибудь в общей папке src с именами icon-font.js и icon-font.json или как хотите, чтобы они назывались.Мне нравится иметь каталог src/config для (как вы уже догадались) вещей конфигурации.
Вернитесь к файлам, которые вы скачали с Fontello, возьмите содержимое config.json и вставьте их в файл icon-font.json.
Откройте файл icon-font.js и вставьте следующее (заменив kelleyicons тем, что вы называете своим собственным шрифтом иконки, конечно).
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './icon-font.json';
const Icon = createIconSetFromFontello(fontelloConfig, 'kelleyicons');
export default Icon;
Шаг 11: Добавить экземпляр Перед запуском приложенияиди куда-нибудь и добавь экземпляр шрифта иконки, чтобы можно было проверить, работает ли он сразу.В любой из ваших компонентов или файлов экрана импортируйте ваш значок из файла icon-font.js.
import MyIcon from './../config/icon-font.js';
И, по вашему мнению, где-нибудь используйте его так (потому что я использую NativeBase, я обернул пользовательский значокв компоненте Icon NativeBase).Вы можете найти отдельные имена для использования в файле icon-font.json.
<Icon><MyIcon
name={'chrome'}
size={20}
color={'#333333'} /></Icon>
Шаг 12: Сохранить, запустить и (надеюсь) отпраздновать!Убедитесь, что все сохранено, перейдите к своему терминалу, run npm start, откройте свое приложение и скрестите пальцы на ноль ошибок!