Очистите своје УРЛ руте, чак и на мобилним апликацијама, користећи Екпо Роутер библиотеку.

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

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

Навигација поново замишљена са Екпо рутером

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

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

instagram viewer

Навигација/рутирање засновано на датотекама екпо рутера је једноставан систем који добро функционише и који је већ познат међу ЈаваСцрипт програмерима и ЈаваСцрипт оквирима као што је Нект.јс, где можете да дефинишете руте.

Инсталирање и подешавање Екпо рутера

Прилично је једноставно мигрирати ваш Екпо пројекат са старог навигационог система на коришћење Екпо рутера.

Корак 1: Инсталирајте Екпо рутер

Користите ову наредбу терминала да покренете инсталатер екпо-роутер:

нпк екпо инсталл екпо-роутер

Такође ћете морати да се уверите да сте инсталирали ове зависности од колега:

  • реаговати-нативе-сафе-ареа-цонтект
  • реацт-нативе-сцреенс
  • екпо-линкинг
  • екпо-статус-бар
  • реацт-нативе-гестуре-хандлер

Ако неки недостају, можете их инсталирати тако што ћете покренути:

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

Корак 2: Ажурирајте улазну тачку

Створити нова индек.јс датотеку за замену постојеће Апп.јс улазну тачку и поставите индек.јс као улазна тачка апликације унутра апп.јсон:

// Постави индек.јс као улазну тачку
{
"главни": "индек.јс"
}
// Увезите следеће унутар индек.јс
увоз"експо-рутер/улаз";

Екпо рутер користи а дубока веза шема за одређивање екрана или садржаја да се отвори приликом рутирања.

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

{
"експо": {
"шема": "моја апликација"
 }
}

Корак 4: Коначна конфигурација

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

У бабел.цонфиг.јс измените постојећи код да изгледа овако:

модул.екпортс = функција (апи) {
 апи.цацхе(истина);
повратак {
 унапред подешена: ["бабел-пресет-екпо"],
 додаци: [
захтевају.ресолве("екпо-роутер/бабел"),
/* */
 ],
 };
};

Сада поново направите и покрените апликацију тако што ћете покренути:

нпк екпо --цлеар
2 Слике

Изградња рута ваше апликације помоћу Екпо рутера

Можете почети да подешавате ток навигације унутар апликација фолдер. Тхе индек.јс датотека је ваша почетна тачка. Екпо Роутер додаје путању сваке датотеке коју креирате унутра апликација до система рута апликације са дубинским линковима УРЛ-а који одговарају свакој страници.

На пример, креирајте а СецондСцреен.јс фајл унутар апликација директоријум и извезите подразумевану компоненту:

увоз { СтилеСхеет, Тект, Виев } из"реаговати-нативе";
увоз Реаговати из"реаговати";
конст СецондСцреен = () => {
повратак (


Други екран</Text>
 </View>
 </View>
 );
};


извозУобичајено СецондСцреен;
конст стилес = СтилеСхеет.цреате({});

Можете се кретати до овог екрана са индек.јс са усеРоутер() метод:

увоз { усеРоутер } из"експо-рутер";
извозУобичајенофункцијаСтрана() {
конст навигатион = усеРоутер();


повратак (

Хелло Ворлд</Text>
Ово је прва страница оф ваша апликација.</Text>
 титле=„Иди до СецондСцреен“
 онПресс={() => {
 навигатион.пусх("/Други екран");
 }}
 />
 </View>
 );
}

Овде додељујете рутеру за навигацију и користите га унутар Буттон елемента позивањем навигатион.пусх("/сецонд"). Аргумент унутар пусх је путања датотеке екрана на који желите да се крећете.

У СецондСцреен такође можете да се крећете до индексног екрана овако:

увоз { Линк } из"експо-рутер";
конст СецондСцреен = () => {
повратак (


Други екран</Text>
"/" асЦхилд>

Идите на индек.јс</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Елемент везе узима хреф проп да би одредио путању. Унутар апликације, "/" путања одговара улазној датотеци (индек.јс). Други реквизит је асЦхилд. Овај пропс вам омогућава да прикажете прву подређену компоненту са свим наведеним реквизитима уместо подразумеване компоненте Линк. Ово можете користити за прилагођавање изгледа компоненте Линк или за имплементацију прилагођене логике рутирања.

Дефинисање динамичких рута

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

Да бисте почели да користите динамичке руте у Екпо Роутер-у, морате да дефинишете руте за руковање динамичким садржајем. Можете користити параметризоване руте тако што ћете навести чуваре места унутар путање руте. Вредности за ове чуваре места ће тада бити доступне вашој рути када неко дође до ње.

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

// апп/роутес/БлогПост.јс
увоз Реаговати из"реаговати";
увоз { усеРоутер } из"експо-рутер";
конст БлогПост = ({ рута }) => {
конст {постИд} = роуте.парамс;


повратак (

Приказује се блог пост са ИД: {постИд}</Text>
 </View>
 );
};
извозУобичајено Блог пост;

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

Генерисање динамичких рута

Сада када имате дефинисану динамичку руту, можете генерисати руте динамички на основу података или корисничког уноса. На пример, ако имате листу постова на блогу преузетих из АПИ-ја, можете динамички да генеришете руте за сваки пост на блогу.

Ево примера:

// апп/цомпонентс/БлогЛист.јс
увоз Реаговати из"реаговати";
увоз { усеНавигатион } из"експо-рутер";
конст БлогЛист = ({ блогПостс }) => {
конст навигатион = усеНавигатион();


конст навигатеТоБлогПост = (постИд) => {
 навигатион.навигате("Блог пост", { постИд });
 };


повратак (

 {блогПостс.мап((пошта) => (
 кеи={пост.ид}
 онПресс={() => навигатеТоБлогПост (пост.ид)}
 >
{пост.титле}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
извозУобичајено БлогЛист;

У овом примеру, понављате преко блогПостс низ и рендер а компонента за сваки пост. Када притиснете пост, навигатеТоБлогПост функција се покреће, прослеђујући постИд до навигационе руте.

Руковање динамичким рутама

Можете да слушате навигационе догађаје специфичне за динамичку руту користећи усеФоцусЕффецт кука.

На пример:

// апп/роутес/БлогПост.јс
увоз Реаговати из"реаговати";
увоз { Роуте, усеФоцусЕффецт } из"експо-рутер";
конст БлогПост = ({ рута }) => {
конст {постИд} = роуте.парамс;


 усеФоцусЕффецт(() => {
// Дохвати податке о постову на блогу на основу ИД-а поста
// Извршите све друге неопходне радње у фокусу
 });


повратак (

Приказује се блог пост са ИД: {постИд}</Text>
 </View>
 );
};
извозУобичајено Блог пост;

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

Навигација помоћу динамичких рута

За навигацију до динамичке руте, можете користити методе навигације које пружа Екпо Роутер.

На пример, за навигацију до Блог пост компонента са специфичним постИд, можете користити навигација.навигација метод:

// апп/цомпонентс/БлогЛист.јс
увоз Реаговати из"реаговати";
увоз { усеНавигатион } из"експо-рутер";
конст БлогЛист = ({ блогПостс }) => {
конст навигатион = усеНавигатион();


конст навигатеТоБлогПост = (постИд) => {
 навигатион.навигате("Блог пост", { постИд });
 };


повратак (

 {блогПостс.мап((пошта) => (
 кеи={пост.ид}
 онПресс={() => навигатеТоБлогПост (пост.ид)}
 >
{пост.титле}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
извозУобичајено БлогЛист;

Када притиснете пост на блогу, навигатеТоБлогПост функција ће се активирати са постИд.

Екпо рутер вам помаже да структурирате своје изворне апликације

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

Истражили сте карактеристике Екпо Роутера, задубили се у основне концепте рутирања и открили како да направите динамичке руте. Са Екпо Роутер-ом, можете да креирате динамичке токове навигације, да рукујете различитим подацима или уносима корисника и да персонализујете навигацију у својој апликацији.