Водич за коришћење прилагођених фонтова у Реацт Нативе-у

Реацт Нативе нуди неколико подразумеваних стилова фонта које можете изабрати када правите апликацију. Међутим, да бисте својој апликацији понудили оригиналност и индивидуалност која јој је потребна да би се истакла на препуном тржишту, можда ћете повремено морати да користите прилагођене фонтове.

Хајде да научимо како да применимо прилагођене фонтове када правимо свој следећи Реацт Нативе пројекат.

Разумевање формата датотека фонтова

Са Реацт Нативе, можете додати прилагођене датотеке фонтова у пројекат и прилагодити изглед текстуалних елемената у вашим апликацијама. Ови прилагођени фонтови долазе у датотекама фонтова са различитим форматима датотека. Датотеке садрже кодиране информације о стилу за одређени тип фонта.

Најчешћи формати датотека фонтова које ћете користити у развоју Реацт Нативе мобилних уређаја су:

• ТруеТипе Фонт (ТТФ): Ово је уобичајени формат датотеке фонта који подржава већина оперативних система и апликација. ТТФ датотеке су релативно мале и могу садржати много знакова.
  instagram viewer
• ОпенТипе Фонт (ОТФ): Сличан је ТТФ-у, али може да садржи и напредне типографске карактеристике. ОТФ датотеке су веће од ТТФ датотека и не подржава их свака апликација.
• Уграђени ОпенТипе фонт (ЕОТ): ЕОТ датотеке су компримоване и могу да садрже информације о управљању дигиталним правима (ДРМ) како би се спречила неовлашћена употреба. Међутим, не подржавају сви претраживачи ЕОТ и генерално се не препоручује за употребу у модерним пројектима.

Када користите прилагођене фонтове у пројекту, важно је одабрати формат датотеке фонта који задовољава потребе пројекта. Ово може укључивати факторе као што су подршка циљне платформе, величина датотеке, захтеви за лиценцирање и подршка за напредне типографске функције.

Увоз и примена датотека фонтова у Реацт Нативе

Можете преузети датотеку фонта са било ког места на интернету и увести је у свој лични Реацт Нативе пројекат да бисте је користили. Међутим, постоји много добрих, сигурних веб локација за преузимање бесплатних фонтова од безбедно.

Да бисте увезли датотеку фонта у свој Реацт Нативе пројекат, креирајте датотеку средства/фонтове директоријум у корену вашег пројекта и преместите датотеке фонтова у њега.

Кораци потребни за коришћење прилагођених фонтова варирају када радите са пројектом који је генерисао искључиво Реацт Нативе или Реацт Нативе пројектом којим управља Екпо.

Реацт Нативе ЦЛИ

Ако радите са Реацт Нативе ЦЛИ генерисаним пројектом, креирајте а реацт-нативе.цонфиг.јс датотеку и дефиниши ова подешавања унутар ње:

модул.екпортс = {
 пројекат: {
 иОС: {},
 андроид: {}
 },
 средства: [ './ассетс/фонтс/' ],
}

Ова конфигурација говори пројекту да укључи средства фонта ускладиштена у "./ассетс/фонтс/" директоријум тако да апликација може да им приступи приликом рендеровања текстуалних елемената.

Затим можете повезати средства фолдер у свој пројекат покретањем следећег:

нпк реацт-нативе-ассет

нпк реацт-нативе линк

Сада можете да користите повезане прилагођене фонтове као што бисте иначе користили у свом ЦСС стилу позивањем њиховог тачног имена у стилу породице фонтова:

Здраво, Свете!</Text>
конст стилес = СтилеСхеет.цреате({
 фонтТект: {
 породица фонтова: 'Тилт Присм',
 Величина фонта: 20,
 },
});

Екпо-ЦЛИ

За пројекте генерисане Екпо, требало би да инсталирате библиотеку екпо-фонтова као зависност за увоз и примену прилагођених фонтова. Инсталирајте га овом командом:

нпк екпо инсталл екпо-фонт

Сада можете да користите експо-фонтове у датотеци пројекта на следећи начин:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { Тект, Виев, СтилеСхеет } из'реацт-нативе';
увоз * као Фонт из'екпо-фонт';
конст ЦустомТект = (реквизити) => {
конст [фонтЛоадед, сетФонтЛоадед] = усеСтате(лажно);
 усеЕффецт(() => {
асинцфункцијалоадФонт() {
чекати Фонт.лоадАсинц({
'прилагођени фонт': захтевају('./ассетс/фонтс/ЦустомФонт.ттф'),
 });
 сетФонтЛоадед(истина);
 }
 лоадФонт();
 }, []);
ако (!фонтЛоадед) {
повратак<Текст>Учитавање...Текст>;
 }
повратак (
породица фонтова: 'прилагођени фонт' }}>
 {пропс.цхилдрен}
 </Text>
 );
};
конст Апп = () => {
повратак (

Здраво, свет!</CustomText>
 </View>
 );
};
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 флек: 1,
 јустифиЦонтент: 'центар',
 алигнИтемс: 'центар',
 },
 текст: {
 Величина фонта: 24,
 фонтВеигхт: 'одважан',
 },
});
извозУобичајено Апликација;

Могли бисте боље преуредити и побољшати горњи блок кода применом образац дизајна контејнера и компоненти за презентацију.

Ево излаза и Реацт Нативе ЦЛИ и Екпо ЦЛИ апликација:

Постављање прилагођеног фонта као подразумеваног фонта за вашу Екпо апликацију

Можда ћете желети да користите прилагођени фонт као подразумевани фонт за целу апликацију Реацт Нативе уместо да га примењујете на сваку Текст компонента појединачно. Да бисте то урадили, можете користити Текст компоненти дефаултПропс да поставите подразумевану породицу фонтова за све Текст компоненте у вашој апликацији.

Користити Тект.дефаултПропс својство за постављање породица фонтова својство на име вашег прилагођеног фонта.

Ево примера:

увоз Реагујте, { усеЕффецт } из'реаговати';
увоз {Текст} из'реацт-нативе';
увоз * као Фонт из'екпо-фонт';
конст Апп = () => {
 усеЕффецт(() => {
асинцфункцијалоадФонт() {
чекати Фонт.лоадАсинц({
'прилагођени фонт': захтевају('./ассетс/фонтс/ЦустомФонт.ттф'),
 });
 Тект.дефаултПропс.стиле.фонтФамили = 'прилагођени фонт';
 }
 лоадФонт();
 }, []);
повратак (
Здраво, свет!</Text>
 );
};
извозУобичајено Апликација;

Подешавање подразумеване породице фонтова користећи Тект.дефаултПропс ће утицати само на текстуалне компоненте које су креиране након што је подразумевано подешено. Ако сте већ креирали компоненте текста пре постављања подразумеване породице фонтова, мораћете да подесите породица фонтова својства на тим компонентама појединачно.

Креирање прилагођене породице фонтова са више стилова фонтова

Да бисте креирали прилагођену породицу фонтова са више стилова фонтова у апликацији генерисаној Реацт Нативе ЦЛИ, прво ћете морати да увезете датотеке фонтова у свој пројекат. Затим креирајте прилагођени објекат породице фонтова који пресликава тежине и стилове фонтова у њихове одговарајуће путање датотека фонтова.

На пример:

увоз {Текст} из'реацт-нативе';
увоз ЦустомФонтс из'../цонфиг/Фонтс';
конст Апп = () => {
конст Прилагођени фонтови = {
'ЦустомФонт-Регулар': захтевају('../фонтс/ЦустомФонт-Регулар.ттф'),
'ЦустомФонт-Болд': захтевају('../фонтс/ЦустомФонт-Болд.ттф'),
'ЦустомФонт-Италиц': захтевају('../фонтс/ЦустомФонт-Италиц.ттф'),
 };
асинц цомпонентДидМоунт() {
чекати Фонт.лоадАсинц (ЦустомФонтс);
 }
повратак(

 Здраво Свете!
 </Text>
 );
};
конст стилес = СтилеСхеет.цреате({
 текст: {
 породица фонтова: 'ЦустомФонт-Регулар',
 тип слова: 'курзив',
 фонтВеигхт: 'одважан',
 Величина фонта: 20,
 },
});
извозУобичајено Апликација;

Имајте на уму да су путање и имена датотека фонтова у овом примеру само чувари места и мораћете да их замените стварним путањама и именима датотека фонтова. Поред тога, морате осигурати да су ваше прилагођене датотеке фонтова исправно увезене у ваш пројекат и да се њихове путање поклапају са онима дефинисаним у вашем објекту породице фонтова.

Завршна размишљања о прилагођеним фонтовима у Реацт Нативе-у

Прилагођени фонтови могу додати јединствен и персонализован додир вашој Реацт Нативе апликацији. У овом чланку смо разговарали о томе како да користимо прилагођене фонтове у Реацт Нативе-у, укључујући увоз датотека фонтова, постављање прилагођеног фонта као подразумевани фонт за целу апликацију, креирање прилагођене породице фонтова са више стилова фонтова и учитавање прилагођених фонтова без коришћења Екпо.

Увек проверите ограничења лиценцирања за било који фонт који користите и уверите се да имате дозволу да га користите у својој апликацији. Такође је важно имати на уму да учитавање више прилагођених фонтова може повећати величину ваше апликације, тако да треба да укључите само фонтове који су вам заиста потребни.