Поглед към различни навигатори за разработка

Ако научавате за React Native, тогава ето една статия, която не искате да пропускате! Навигаторите се използват във всяко приложение на React Native за навигиране от един екран на друг.

Тази публикация ще обсъди някои от най-използваните навигатори, както и връзка към правилните документи, които разработчиците и студентите да използват!

Теми в тази статия

  • Минимални изисквания
  • Навигация с раздели
  • Навигация в чекмеджето
  • Навигация в стека
  • Навигация в горните раздели на материала
  • Навигация в долните раздели на материала

Минимални изисквания

  • react-native >= 0.63.0
  • expo ›= 41 (ако използвате Expo)
  • typescript ›= 4.1.0 (ако използвате TypeScript)

Навигатор на раздели

Първо е Навигация с раздели, тук има долни раздели. Разработчиците могат да добавят толкова долни раздели, колкото искат, но обикновено се използват 2–5 раздела в зависимост от сложността на приложението.

Навигацията с раздели е перфектна за разделяне на екрани като екран „Начало“ и „Настройки“, показани на изображението по-горе. Връзката към документа показва примерни кодове за това как да започнете да използвате Навигатора на раздели.

Имайте предвид, че за Tab Navigator трябва да импортирате икони или да използвате Text като етикет. Можете да използвате React икони или персонализирани икони.

Навигатор на чекмеджета

Навигатор на чекмеджета показва лесно достъпно меню, след като потребителят щракне върху иконата на чекмеджето или издърпа чекмеджето, както е показано по-долу.

Drawer Navigator е страхотен за приложения, които имат само 1 екран, а разработчиците на приложения биха искали да добавят меню за бърз достъп с неща като Изход, Вход, Настройки, Относно, Правила за поверителност и т.н. Добър е и за приложения, които искате за навигация само с една ръка.

Навигатор на стека

Stack Navigator е класическата система за навигация в тази статия. Нарича се стек, защото екраните започват да се подреждат един върху друг, когато потребител започне да натиска бутон и това го отвежда 1 слой по-дълбоко.

След като започнете да слизате ниво надолу в Stack Navigator, ще има бутон със стрелка назад, за да се върнете към предишния стек. Освен стрелката за назад, можете също да приложите плъзгане за „плъзгане назад“ към предишния екран.

Навигатор за горни раздели за материали

Най-честата употреба на Material Top Tabs е, че потребителите могат да се плъзгат от един екран на друг. Текущият екран обикновено е оцветен в различен цвят или ще има плъзгач, който да показва на потребителя кой екран гледа в момента.

Material Top Tabs Navigator обикновено се намира в Music Apps, но няма ограничение за това къде можете и къде не можете да използвате този навигатор.

Материал Долни раздели Навигатор

Всъщност никога не съм използвал този тип навигация, но тя е много подобна на първата навигация с раздели. „Материални долни раздели“ дава на разработчика повече контрол върху цветовете и размерите с навигацията.

Ако искате да направите персонализирана навигация в долния раздел, това е правилният начин.

Искате ли да научите за React Native Components след това? Вижте статията по-долу.



Заключителни думи

Като някой, който също учи React Native, тези статии трябва да помогнат на хората да разбият концепциите и да помогнат за разбирането. Знам, че програмната документация може да бъде малко сложна, така че, моля, споделете, публикувайте повторно, маркирайте или изпратете тези URL адреси на вашите приятели!

Не събирам имейли, тъй като не обичам да изпращам спам, така че единственият начин, по който другите програмисти могат да прочетат тези статии, е ако ВИЕ помогнете да ги споделите!

. . .

Ако ви е харесало това съдържание, не забравяйте да следвате, ръкопляскатеили коментирате
, защото това ме насърчава да пиша повече. Наздраве!