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

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

React Navigation, мощна и гъвкава библиотека за навигация за React Native, може да ви помогне да създадете това изживяване. Използвайки неговите възможности, можете без усилие да конструирате страхотна мобилна навигационна система.

Инсталиране на навигационната библиотека на React

React Navigation предлага три основни модела за навигация, а именно навигация Stack, Tab и Drawer за изграждане на навигационна система. Тези модели за навигация предоставят рамка за организиране и управление на навигация между различни екрани във вашето приложение.

За да започнете да използвате React Navigation, инсталирайте библиотеката и нейните необходими зависимости:

npm инсталирайте @react-navigation/native
npm инсталирате react-native-screens react-native-safe-area-context
instagram viewer

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

Всеки навигатор в React Navigation живее в своя отделна библиотека. За да използвате някой от навигаторите, ще трябва да ги инсталирате поотделно.

Добре обмислената структура на проекта е полезна при изграждането на навигационна система за вашето мобилно приложение. Добра практика е да създадете src папка в главната директория на вашия проект. В тази папка трябва да имате a екрани папка. Това ще служи за отделяне на компонентите на вашия екран от други компоненти.

Ще напишете кода, за да настроите модела за навигация, който използвате във вашия проект App.js файл.

Създаване на навигатор вътре в App.js файл е най-добра практика поради няколко причини:

  • The App.js обикновено е компонент от най-високо ниво в приложение React Native. Дефинирането на навигатора в този файл ще гарантира, че навигационната йерархия е на най-високото ниво на вашето компонентно дърво и е достъпна навсякъде.
  • Поставянето на навигатора в App.js файл ви позволява лесно да осъществявате достъп и да предавате състоянието и подпорите за цялото приложение на екраните в рамките на навигатора.
  • React Navigation's NavigationContainer предоставя необходимия контекст за навигация и обикновено се намира вътре App.js. Като поставите Navigator в същия файл, можете лесно да го интегрирате с NavigationContainer.

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

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

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

Например:

импортиране Реагирайте от"реагира";
импортиране { NavigationContainer } от'@react-navigation/native';
импортиране { createStackNavigator } от'@react-navigation/stack';
// Импортирайте компонентите на вашия екран
импортиране Началния екран от'./screens/HomeScreen';
импортиране Екран с подробности от'./screens/DetailsScreen';


конст Стек = createStackNavigator();


конст Приложение = () => {
връщане (


"У дома" component={HomeScreen} />
"Подробности" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
износпо подразбиране Приложение;

Горният кодов блок създава компонент на Stack Navigator, като използва createStackNavigator() от библиотеката за навигация.

В този пример Stack Navigator има два екрана: У дома и Подробности.

Сега инсталирайте Stack Navigator:

npm инсталирайте @react-navigation/stack

Вътре Началния екран, можете да използвате навигация обект за тестване на Stack Navigator:

импортиране {Стилова таблица, изглед, бутон} от"реагиране-роден";
импортиране Реагирайте от"реагира";
конст Начален екран = ({ навигация }) => {
връщане (

 заглавие=„Навигирайте до ..“
 onPress={() => navigation.navigate("детайлен екран")}
 />
 </View>
 );
};


износпо подразбиране Началния екран;
конст стилове = StyleSheet.create({});
2 изображения

Забележете как Stack Navigator автоматично създава бутон със стрелка за управление на навигацията назад към предишните екрани.

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

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

За да започнете, инсталирайте @react-navigation/bottom-tabs използване на библиотека мениджъра на пакети NPM.

с createBottomNavigator(), можете да създадете екземпляр на Tab Navigator, както направихте с Stack Navigator:

импортиране { createBottomTabNavigator } от'@react-navigation/bottom-tabs';
конст Tab = createBottomTabNavigator();

След това дефинирайте екраните, които искате като раздели в навигатора и NavigationContainer:

износпо подразбиранефункцияПриложение() {
връщане (


 име="У дома"
 компонент={Начален екран}
 опции={{ заглавие: "У дома" }}
 />
 име="Профил"
 компонент={ProfileScreen}
 опции={{ заглавие: "Профил" }}
 />
 име="Подробности"
 компонент={DetailScreen}
 опции={{ заглавие: "Подробности" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Когато стартирате приложението си, трябва да видите Навигатор на раздели с определени от вас екрани в долната част.

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

Бихте могли да използвате tabBarPosition oопция за позициониране на навигатора на Горна част, точно, наляво, или отдолу (по подразбиране).

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

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

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

За да използвате Drawer Navigator, инсталирайте го заедно с манипулатор на жестове за реагиране и реагира-роден-реанимиран:

npm инсталирайте @react-navigation/drawer
npm инсталирате реакция-роден-обработчик на жестове реагира-роден-реанимиран

Ще трябва също така да конфигурирате reanimated във вашия babel.config.js файл:

модул.exports = {
 предварителни настройки: ["babel-preset-expo"],
 добавки: ["react-native-reanimated/plugin"],
};

Ето пример за това как да настроите Drawer Navigator:

импортиране"react-native-gesture-handler"; // Този импорт трябва да е най-отгоре
импортиране { Изглед, текст, бутон } от"реагиране-роден";
импортиране { createDrawerNavigator } от"@react-navigation/drawer";
импортиране { NavigationContainer } от"@react-navigation/native";


конст Чекмедже = createDrawerNavigator();


конст Съдържание на чекмеджето = ({ навигация }) => {
връщане (
flex: 1, alignItems: "център", justifyContent: "център" }}>
размер на шрифта: 24, fontWeight: "удебелен" }}>
 Добре дошли в чекмеджето
 </Text>

 Това е допълнително съдържание, което можете да показвате в чекмеджето.
 </Text>


конст Приложение = () => (

 първоначално име на маршрут="У дома"
 drawerContent={(реквизити) => <Съдържание на чекмеджето {...реквизит} />}
 >
 {/* Другите ви екрани тук */}
 </Drawer.Navigator>
 </NavigationContainer>
);
износпо подразбиране Приложение;

В този пример, Съдържание на чекмеджето компонент се предава като drawerContent опора на createDrawerNavigator. Вътре в Съдържание на чекмеджето компонент, можете да персонализирате съдържанието, за да показва желаната информация, като използвате текстови компоненти или всякакви други елементи и стил.

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

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

Обмислете тези най-добри практики, за да извлечете максимума от Drawer Navigator:

  • Избягвайте да претрупвате чекмеджето с твърде много опции и се фокусирайте върху представянето на най-подходящите и често използвани функции.
  • Категоризирайте свързаните елементи логично и интуитивно, за да помогнете на потребителите бързо да намерят това, което търсят.
  • Използвайте икони или визуални индикатори, за да помогнете на потребителите да разберат предназначението на всеки елемент в чекмеджето.

Предаване на данни с навигационни подпори

React Navigation предоставя мощен механизъм, който ви позволява да предавате данни през навигационни подпори.

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

Първо, трябва да дефинирате вашата навигационна структура. Сега, за да предадем данни от Началния екран към а DetailScreen когато е избран елемент, вътре Началния екран дефинирайте функция, която обработва навигацията и включва данните, които искате да предадете.

импортиране Реагирайте от"реагира";
импортиране { Изглед, текст, бутон } от"реагиране на родния";
конст Начален екран = ({ навигация }) => {
конст handleItemPress = (вещ) => {
 navigation.navigate("DetailScreen", { вещ });
 };


връщане (

списък на Елементи</Text>
износпо подразбиране Началния екран;

The handleItemPress функцията използва навигация.навигирам метод за навигиране до DetailScreen докато подавате данните за избрания елемент като параметър във втория аргумент.

За да имате достъп до предадените данни вътре в DetailScreen компонент, ще ви трябва навигация опора:

импортиране Реагирайте от"реагира";
импортиране { Преглед, Текст } от"реагиране на родния";
конст DetailScreen = ({ навигация }) => {
конст елемент = навигация.getParam('вещ', '');


връщане (

Екран с подробности</Text>
{артикул</Text>
 </View>
 );
};
износпо подразбиране DetailScreen;

Ето, DetailScreen употреби на компоненти navigation.getParam за извличане на предадения елемент от навигационните подпори. В този пример е зададена стойност по подразбиране на празен низ, в случай че данните не са налични. По този начин приложението ви няма да се срине при рендиране.

В зависимост от сложността на вашето приложение, можете да проучите използването на библиотеки за управление на състоянието като Redux или контекстния API за управление и споделяне на данни глобално.

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

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

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