Како се кретати између екрана у апликацији Реацт Нативе

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

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

Пре него што почнете

Да бисте пратили овај водич на свом локалном рачунару, потребно је да имате следеће инсталирано:

• Ноде.јс в10 или новији
• Ксцоде или Андроид Студио (подесите за покретање емулатора)
• Реацт Нативе ЦЛИ

За упутства корак по корак о томе како да подесите своје Реацт Нативе развојно окружење, можете прочитати званични Реацт Нативе документацију за постављање.

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

Разумевање како функционише навигација стеком

Замислите да је ваша Реацт Нативе апликација стек. У почетку, на тој стеци, имате Кућа, што је први екран који се приказује када отворите апликацију.

Ако бисте се кретали до О томе екран са Кућа екран, апликација би гурнула О томе на гомилу, тако да седи на врху Кућа. Слично томе, апликација гура сваки нови екран на који се крећете на стек.

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

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

1. Инсталирајте Реацт Навигатион за изворне апликације

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

нпм и @реаговати-навигација/домородац

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

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

Да бисте инсталирали други, покрените ово:

нпм ја реагујем-домородац-сцреенс

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

2. Подесите екран у својој Реацт Нативе апликацији

За овај пример, направићемо само два екрана — почетни екран и екран о информацијама.

Направите фасциклу под називом екрани унутар основног директоријума ваше апликације. Затим направите две датотеке под називом ХомеСцреен.јс и АбоутСцреен.јс унутар директоријума екрани.

Шта додати у вашу ХомеСцреен.јс датотеку

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

увоз * као Реаговати из'реаговати';
увоз { Тект, Виев, СтилеСхеет, ТоуцхаблеОпацити} из'реацт-нативе';
увоз { усеСтате } из'реаговати'

Затим креирајте функционалну компоненту ХомеСцреен и приступите навигационом објекту користећи деконструкцију објекта (према Реагујте на најбоље праксе), а затим вратите наслов и дугме за навигацију до екрана о:

извозУобичајенофункцијаПочетни екран({навигација}) { 
повратак ( 
<Погледстил={стилес.цонтаинер}>
<Текстстил={стилес.параграпх}> Почетни екран Текст>
 титле="Иди на О"
 онПресс={() => навигатион.навигате('АбоутСцреен')} 
 /> 
Поглед>
 );
}

Овде кажемо Реацт Нативе-у да се креће до О томе када корисник притисне дугме. У овом случају, не прослеђујемо никакве податке на екран. Али претпоставимо да желите проследити податке функцији; ево како бисте то урадили:

извозУобичајенофункцијаПочетни екран({навигација}) { 
конст подаци = { вебситеНаме: "Јохн'с Тецх" }
повратак ( 
<Погледстил={стилес.цонтаинер}>
// Текст иде овде 
 титле="Иди на О"
 онПресс={() => навигатион.навигате('АбоутСцреен', подаци)} 
 /> 
Поглед>
 );
}

Сада када притиснете дугме, овај код преноси податке на следећи екран, О томе. Унутар АбоутСцреен.јс датотеку, можете приступити подацима са руте и приказати их на корисничком интерфејсу.

Шта додати у датотеку АбоутСцреен.јс

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

увоз * као Реаговати из'реаговати';
увоз { Тект, Виев, СтилеСхеет, Буттон } из'реацт-нативе';

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

извозУобичајенофункцијаАбоутСцреен({рута}) { 
дозволити датаОбј = роуте.парамс
повратак ( 
<Погледстил={стилес.цонтаинер}>
<Текстстил={стилес.параграпх}>
 Ово је екран о страници {датаОбј.вебситеНаме} 
Текст>
Поглед>
 );
}

Ако се сећате, навели смо једно својство у објекту података под називом вебситеНаме, који сада приказујемо унутар саставни део. Можете додати онолико својстава колико желите у објекат и приступити им унутар компоненте циљних екрана.

Следећи корак је да подесимо наш стек навигатор са два екрана.

3. Повезивање екрана са Стацк Навигатором

Унутар Апп.јс, почните увозом следећих зависности:

увоз * као Реаговати из'реаговати';
увоз Почетни екран из'./сцреенс/ХомеСцреен'
увоз АбоутСцреен из'./сцреенс/АбоутСцреен'
увоз { НавигатионЦонтаинер } из„@реацт-навигатион/нативе“
увоз { цреатеНативеСтацкНавигатор } из„@реацт-навигатион/нативе-стацк“

У редовима два и три увезли смо два екрана која смо управо креирали. Затим смо увезли НавигатионЦонтаинер

из @реацт-навигатион/нативе и цреатеНативеСтацкНавигатор из @реацт-навигатион/нативе-стацк да нам помогне да повежемо екране.

Следеће, зови цреатеНативеСтацкНавигатор да преузмете стек:

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

Ово нам омогућава да „сложимо“ екране између којих желите да прелазите у својој апликацији.

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

извозУобичајенофункцијаАпликација() { 
повратак ( 
<НавигатионЦонтаинер>
<Гомила. Навигатор>
<Гомила. Екраниме="Почетни екран"саставни део = {Почетни екран} />
<Гомила. Екраниме=„О екрану“саставни део = {АбоутСцреен} />
Гомила. Навигатор>
НавигатионЦонтаинер>
 );
}

Овај код поставља екран ХомеСцреен на врх стека, што значи да ће апликација прво приказати компоненту Хоме када заврши учитавање.

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

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

Сазнајте више о Реацт Нативе-у

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