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

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

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

Инсталирање Реацт Навигацијске библиотеке

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

Да бисте почели да користите Реацт Навигатион, инсталирајте библиотеку и њене неопходне зависности:

нпм инсталл @реацт-навигатион/нативе
нпм инсталл реацт-нативе-сцреенс реацт-нативе-сафе-ареа-цонтект

Подешавање Навигатора

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

instagram viewer

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

Писаћете код да бисте подесили образац за навигацију који користите унутар свог пројекта Апп.јс фајл.

Креирање Навигатора унутар Апп.јс датотека је најбоља пракса из неколико разлога:

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

Стацк Навигатор

Стацк Навигатор је најпопуларнији образац за навигацију у оквиру библиотеке Реацт Навигатион. Користи структуру података стека где је сваки екран потпуно друга компонента и наслага се на претходни.

Када се нови екран гурне на врх стека, он постаје активан екран, а претходни екран се баца испод њега. Ово омогућава корисницима да се крећу напред-назад кроз стек, попут тока навигације веб локације. Можете подесите навигатор стека за прелазак са једног екрана на други.

На пример:

увоз Реаговати из'реаговати';
увоз { НавигатионЦонтаинер } из'@реацт-навигатион/нативе';
увоз { цреатеСтацкНавигатор } из'@реацт-навигатион/стацк';
// Увезите компоненте екрана
увоз Почетни екран из'./сцреенс/ХомеСцреен';
увоз ДетаилсСцреен из'./сцреенс/ДетаилсСцреен';


конст Стацк = цреатеСтацкНавигатор();


конст Апп = () => {
повратак (


"Кућа" цомпонент={ХомеСцреен} />
"Детаљи" цомпонент={ДетаилсСцреен} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
извозУобичајено Апликација;

Горњи блок кода креира компоненту Стацк Навигатор користећи цреатеСтацкНавигатор() из навигационе библиотеке.

У овом примеру, Стацк Навигатор има два екрана: Кућа и Детаљи.

Сада инсталирајте Стацк Навигатор:

нпм инсталл @реацт-навигатион/стацк

У Почетни екран, можете користити навигација објекат за тестирање Стацк Навигатор:

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

 титле="Иди на .."
 онПресс={() => навигатион.навигате(„ДетаилСцреен“)}
 />
 </View>
 );
};


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

Обратите пажњу на то како Стацк Навигатор аутоматски креира дугме са стрелицом за руковање повратном навигацијом на претходне екране.

Таб Навигатор

У неким ситуацијама, поседовање система за навигацију напред-назад као што је Стацк Навигатор не пружа сјајно искуство. Таб Навигатор је погоднији за ове случајеве. Приказује екране за навигацију који су унапред доступни кориснику и може бити лакши за коришћење, као трака за веб навигацију.

Да бисте започели, инсталирајте @реацт-навигатион/боттом-табс коришћење библиотеке НПМ менаџер пакета.

Витх цреатеБоттомНавигатор(), можете креирати инстанцу Навигатора картица као што сте урадили са Стацк Навигатором:

увоз { цреатеБоттомТабНавигатор } из'@реацт-навигатион/боттом-табс';
конст Таб = цреатеБоттомТабНавигатор();

Затим дефинишите екране које желите као картице у оквиру навигатора и НавигатионЦонтаинер:

извозУобичајенофункцијаАпликација() {
повратак (


 наме="Кућа"
 компонента={ХомеСцреен}
 оптионс={{ наслов: "Кућа" }}
 />
 наме="Профил"
 компонента={ПрофилеСцреен}
 оптионс={{ наслов: "Профил" }}
 />
 наме="Детаљи"
 компонента={ДетаилСцреен}
 оптионс={{ наслов: "Детаљи" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Када покренете апликацију, требало би да видите Навигатор картица са дефинисаним екранима на дну.

3 Слике

Можете користити табБарПоситион оопцију за позиционирање навигатора на топ, јел тако, лево, или дно (Уобичајено).

Навигатор фиока

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

2 Слике

Да бисте користили Навигатор фиока, инсталирајте га заједно са реацт-нативе-гестуре-хандлер и реаговати-нативе-реаниматед:

нпм инсталл @реацт-навигатион/дравер
нпм инсталл реацт-нативе-гестуре-хандлер реаговати-нативе-реаниматед

Такође ћете морати да конфигуришете реанимирани унутар вашег бабел.цонфиг.јс фајл:

модул.екпортс = {
 унапред подешена: ["бабел-пресет-екпо"],
 додаци: ["реаговати-нативе-реаниматед/плугин"],
};

Ево примера како да подесите Навигатор фиока:

увоз"реацт-нативе-гестуре-хандлер"; // Овај увоз мора бити на врху
увоз { Приказ, текст, дугме } из"реаговати-нативе";
увоз { цреатеДраверНавигатор } из„@реацт-навигатион/дравер“;
увоз { НавигатионЦонтаинер } из„@реацт-навигатион/нативе“;


конст Дравер = цреатеДраверНавигатор();


конст ДраверЦонтент = ({ навигација }) => {
повратак (
флек: 1, алигнИтемс: "центар", јустифиЦонтент: "центар" }}>
фонтСизе: 24, фонтВеигхт: "одважан" }}>
 Добродошли у фиоку
 </Text>

 Ово је додатни садржај који можете приказати ин фиока.
 </Text>


конст Апп = () => (

 инитиалРоутеНаме="Кућа"
 драверЦонтент={(реквизити) => <ДраверЦонтент {...реквизити} />}
 >
 {/* Ваши други екрани овде */}
 </Drawer.Navigator>
 </NavigationContainer>
);
извозУобичајено Апликација;

У овом примеру, ДраверЦонтент компонента се преноси као драверЦонтент проп то цреатеДраверНавигатор. Унутар ДраверЦонтент компоненту, можете прилагодити садржај да прикаже жељене информације користећи текстуалне компоненте или било које друге елементе и стилове.

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

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

Размотрите ове најбоље праксе да бисте на најбољи начин искористили Навигатор фиока:

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

Преношење података помоћу навигационих реквизита

Реацт Навигатион пружа моћан механизам који вам омогућава да пренесете податке кроз навигационе реквизите.

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

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

увоз Реаговати из'реаговати';
увоз { Приказ, текст, дугме } из'реацт-нативе';
конст ХомеСцреен = ({ навигација }) => {
конст хандлеИтемПресс = (предмет) => {
 навигатион.навигате('ДетаилСцреен', { итем });
 };


повратак (

Листа оф Итемс</Text>
извозУобичајено Почетни екран;

Тхе хандлеИтемПресс функција користи навигација.навигација метод за навигацију до ДетаилСцреен док у другом аргументу прослеђује податке изабране ставке као параметар.

Да бисте могли да приступите прослеђеним подацима унутар ДетаилСцреен компонента, требаће вам навигација реквизит:

увоз Реаговати из'реаговати';
увоз { Приказ, текст } из'реацт-нативе';
конст ДетаилСцреен = ({ навигација }) => {
конст итем = навигатион.гетПарам('ставка', '');


повратак (

Екран детаља</Text>
{итем}</Text>
 </View>
 );
};
извозУобичајено ДетаилСцреен;

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

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

Организовање вашег навигационог кода

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

Уз ово, можете бити сигурни да ћете креирати беспрекорну навигацију за своје кориснике док уживате у искуству развоја.