Използването на стеков навигатор може да помогне на приложението ви да премине от един екран към следващия с минимален код.

Често, когато създавате приложение React Native, ще го композирате от различни екрани като Вход, Начало и Относно. След това ще трябва да внедрите механизъм за навигация, така че вашите потребители да могат да навигират в приложението и да имат достъп до отделните му екрани в правилния ред.

Целта на този урок е да ви преведе през процеса на настройка на навигационна система във вашето приложение React Native. Това включва инсталиране на библиотеката, добавяне на вашите екрани към навигатора на стека и свързване на екраните заедно от всеки от вашите компоненти.

Преди да започнеш

За да следвате този урок на вашия локален компютър, трябва да имате инсталирано следното:

  • Node.js v10 или по-нова версия
  • Xcode или Android Studio (настройте за стартиране на емулатора)
  • React Native CLI

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

instagram viewer

Преди да започнете да разглеждате как да внедрите навигация в нашето приложение React Native, нека разберем как работи механизмът за навигация в стека в React Native.

Разбиране как работи навигацията в стека

Представете си, че вашето приложение React Native е стек. Първоначално на този стек имате У дома, който е първият екран, който се показва, когато отворите приложението.

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

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

С ясно разбиране на механизма за навигация в стека, сега е време да го настроите в приложение React Native.

1. Инсталирайте React Navigation for Native Apps

За да започнете, инсталирайте Навигационен пакет React за собствени приложения във вашия проект React Native, като изпълните тази команда на терминал:

npm i @реагирай-навигация/местен

Пакетът, който току-що инсталирахте изисква React Native Stack и React Native Screens да тече правилно. За да инсталирате RN Stack, изпълнете:

npm i @реагирай-навигация/местен- стек

За да инсталирате втория, изпълнете това:

npm реагирам-местен- екрани

Сега имате всичко необходимо, за да започнете да създавате механизма за навигация във вашето приложение. Следващата стъпка е да настроите екраните.

2. Настройте екрана във вашето приложение React Native

За този пример ще създадем само два екрана — началния екран и екрана за информация.

Създайте папка с име екрани в главната директория на вашето приложение. След това създайте два файла с имена HomeScreen.js и AboutScreen.js вътре в директорията екрани.

Какво да добавите към вашия файл HomeScreen.js

Отворете файла HomeScreen.js и започнете с импортиране на следното:

импортиране * като Реагирайте от"реагира";
импортиране { Text, View, StyleSheet, TouchableOpacity } от"реагиране на родния";
импортиране {useState} от"реагира"

След това създайте функционалния компонент HomeScreen и осъществете достъп до навигационния обект, като използвате деконструкция на обект (съгласно React най-добри практики), след това върнете заглавие и бутон за навигиране до екрана за информация:

износпо подразбиранефункцияНачалния екран({навигация}) { 
връщане ( 
<Прегледстил={styles.container}>
<Текстстил={styles.paragraph}> Началния екран Текст>
 заглавие=„Отидете на Относно“
 onPress={() => navigation.navigate(„Относно екрана“)} 
 /> 
Преглед>
 );
}

Тук казваме на React Native да навигира относно когато потребител натисне бутона. В този случай ние не предаваме никакви данни на екрана. Но да предположим, че искате предава данни на функцията; ето как бихте го направили:

износпо подразбиранефункцияНачалния екран({навигация}) { 
конст данни = { websiteName: "Техника на Джон" }
връщане ( 
<Прегледстил={styles.container}>
// Текстът отива тук 
 заглавие=„Отидете на Относно“
 onPress={() => navigation.navigate(„Относно екрана“, данни)} 
 /> 
Преглед>
 );
}

Сега, когато натиснете бутона, този код предава данните на следващия екран, относно. Вътре в AboutScreen.js файл, можете да получите достъп до данните от маршрута и да ги покажете в потребителския интерфейс.

Какво да добавите към вашия файл AboutScreen.js

Отворете файла AboutScreen.js и започнете с импортиране на следните зависимости:

импортиране * като Реагирайте от"реагира";
импортиране {Текст, изглед, стилова таблица, бутон} от"реагиране на родния";

След това създайте AboutScreen функционален компонент, който приема данни от route.params свойство и връща данните в потребителския интерфейс:

износпо подразбиранефункцияAboutScreen({маршрут}) { 
позволявам dataObj = route.params
връщане ( 
<Прегледстил={styles.container}>
<Текстстил={styles.paragraph}>
 Това е екранът Информация за {dataObj.websiteName} 
Текст>
Преглед>
 );
}

Ако си спомняте, посочихме едно свойство в посочения обект на данни websiteName, който сега изобразяваме вътре в компонент. Можете да добавите толкова свойства, колкото искате в обекта, и да получите достъп до тях вътре в компонента на целевите екрани.

Следващата стъпка е да настроим нашия стеков навигатор с двата екрана.

3. Свързване на екраните със Stack Navigator

В App.js започнете с импортиране на следните зависимости:

импортиране * като Реагирайте от"реагира";
импортиране Началния екран от'./screens/HomeScreen'
импортиране AboutScreen от'./screens/AboutScreen'
импортиране { NavigationContainer } от"@react-navigation/native"
импортиране { createNativeStackNavigator } от"@react-navigation/native-stack"

На втори и трети ред импортирахме двата екрана, които току-що създадохме. След това внесохме NavigationContainer

от @react-navigation/native и createNativeStackNavigator от @react-navigation/native-stack за да ни помогне да свържем екраните.

След това се обадете createNativeStackNavigator за извличане на стека:

конст Стек = createNativeStackNavigator()

Това ни позволява да „подреждаме“ екраните, между които искате да превключвате във вашето приложение.

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

износпо подразбиранефункцияПриложение() { 
връщане ( 
<NavigationContainer>
<Стек. Навигатор>
<Стек. екраниме="Началния екран"компонент = {Началния екран} />
<Стек. екраниме=„AboutScreen“компонент = {AboutScreen} />
Стек. Навигатор>
NavigationContainer>
 );
}

Този код поставя екрана HomeScreen в горната част на стека, което означава, че приложението първо ще изобрази компонента Home, когато завърши зареждането.

Сега всичко е готово. Можете да тествате приложението, като щракнете върху Отидете на Относно бутон в началния потребителски интерфейс. Това трябва да ви пренасочи към относно, и ще намерите websiteName свойство, показано в потребителския интерфейс:

2 изображения

Най-доброто при използването на React Navigation for Native е, че е толкова лесно да се настрои и използва. Не изисква никакви допълнителни конфигурации (освен необходимите библиотеки, които сте инсталирали) и можете също да се свържете различни видове Paywalls (ако възнамерявате да създадете приложение, базирано на абонамент).

Научете повече за React Native

React Native е междуплатформена рамка за създаване на приложения, които работят на устройства с Android и iOS. Има толкова много да научите за React Native и ако не сте запознати с използването на рамката, трябва да започнете, като научите основите.