Вступ

React Native дозволяє створювати рідні мобільні додатки з JavaScript та React. Критичний аспект розробки мобільних додатків є навігацією: випромінюючи користувачів через різні екрани та функції безшовно. React Navigation - найпопулярніша, бібліотека для впровадження навігації в React рідних додатках. Вона забезпечує декларативний API, підтримує стеку, вкладку та навігатори ящиків, а також ручить платформи специфічні жести та переходи. Цей посібник охоплює все від установки до розширених шаблонів, як глибоке посилання та автентифікаційні витрати.

Передумови та монтаж

Перед використанням React Navigation, ви можете отримати ініціалізований проект React Native. Якщо ви починаєте свіжі, скористайтеся React Native CLI або Expo. React Navigation працює як з.

Встановити Core пакети

Встановити необхідні пакети за допомогою npm або пряжі. Основна бібліотека і її основні залежності:

npm install @react-navigation/native

Після цього встановіть допоміжні бібліотеки, які React Navigation залежать від керування екранами та безпечного використання зони:

npm install react-native-screens react-native-safe-area-context

Якщо ви використовуєте Expo, ці бібліотеки вже включені. Для виконання React рідних проектів слідувати інструкції з посилання на офіційну документацію, щоб забезпечити належні модулі (дозволяє ручки, які це для React Native 0.60+).

Встановити навігатор

React Navigation пропонує декілька навігаторів. нативний навігатор стека] Рекомендовано для більшості випадків використання:

npm install @react-navigation/native-stack

Інші навігатори, як , вкладка знизу і , дравер встановлюються окремо:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Основні поняття

React Navigation побудовано навколо трьох основних блоків будівлі:

  • НавігаціяКонтейнер – зовнішній обгортковий, який керує навігацією та державою.
  • Навігатори] – компоненти, які визначають навігаційний шаблон (stack, tab, ящик).
  • Screens] – окремі компоненти, які представляють вигляд або сторінку в додатку.

Кожна навігаційна установка повинна бути загортається в . Ця ємність зазвичай розміщується в корені компонента додатка.

Налаштування стійки навігатора

Навігатор стека керує останнім в першу чергу стеком екранів. Він використовує анімації переходу на рідну платформу та жести за замовчуванням.

По-перше, імпортувати необхідні модулі:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Створіть екземпляр навігатора:

const Stack = createNativeStackNavigator();

Визначте навігатор всередині компонента додатка:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

вимагає проп (використаний для навігації) і проп (реакційний компонент для рендерингу).

Створення екранів та навігації

Екрани є стандартними компонентами React. Вони отримують два важливі пропси: і . об'єкт забезпечує методи переміщення між екранами. Нижче наведено типовий домашній екран:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

Навігація навігаційної панелі не потребує використання навігаційної пропорції, якщо вона повинна навігуватися далі.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Методи навігації

React Navigation надає декілька методів через проп:

  • navigate(name, params)] – переходить на екран, що нагадує існуючий екземпляр, якщо він існує в стеці.
  • push(name, params) – завжди штовхає новий екран на стек, навіть якщо цей же екран вже в стекі.
  • goBack()] – навігація до попереднього екрана в стеці.
  • перезамінити (ім'я, парами) – замінює поточний екран з новим, знімаючи струм з історії.
  • reset(state)] – скинути весь стан навігації на задану державну об’єкт.

Наприклад, для відштовхування нового екземпляра екрану та параметрів пропуску:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Пасування параметрів між екранами

Дані можна перенести на екран через другий аргумент або . Приймання екрана здійснюється за допомогою параметра .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Встановіть значення параметра за замовчуванням за допомогою на компоненті екрана:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Налаштування параметрів навігації

Кожен екран може налаштувати його заголовок, значок вкладки, етикетку ящика тощо, використовуючи проп або проп навігатор.

Налаштування головки

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Динаміка можна встановити за допомогою функції, яка отримує :

options={({ route }) => ({ title: route.params.name })}

Табличка Навігатор

Навігація вкладок є загальним для розділів додатків верхнього рівня. Встановіть навігатор вкладок низу:

npm install @react-navigation/bottom-tabs

Створіть навігатор вкладок і поєднайте його з вашим стеком:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Ви можете гніздувати навігатор вкладок всередині навігатора стека або навпаки. Налаштуйте іконки вкладок за допомогою пропа .

Навігатор навігатора

Навігатор ящика ковзає ящик зліва, розкриваючи навігацію елементів. Встановлюємо його:

npm install @react-navigation/drawer

Прикладна установка:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Використовуйте для відкриття та закриття програми ящика, тематично.

Навігатори

Комплексні додатки часто гніздові навігатори (наприклад, навігатор вкладок всередині навігатора стека). Реакція ручок, що ковзає, граціозно. пропагування на будь-якому екрані може викликати методи на батьківському навігаторі, якщо це необхідно. Використовуйте для доступу до методів батьківського навігатора.

Приклад: Стк, що містить навігатор вкладок і екран налаштувань:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Посилання та глибоке посилання

React Navigation підтримує глибоке посилання для обробки URL-адрес, які відкривають певні екрани. Налаштуйте проп :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Після чого робіть вхідні URL-адреси. Це дозволяє функції, такі як посилання на повідомлення про поштовх до певного екрана.

Афінтична борона

Багато додатків вимагають умовної навігації на основі автентифікації стану. Загальний шаблон полягає в тому, щоб переключити навігатор на рівні кореня:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Крім того, використовуйте один стек з умовними екранами. Уникайте флігерування, зберігаючи обіцянку або стан до дати.

Продуктивність та кращі практики

  • нативний навігатор стека (не ]) для кращої продуктивності та рідних переходів.
  • Мінімізувати кількість екранів, встановлених одночасно. Немонтування з’ємів з’ємів з’єднань прихованих екранів за замовчуванням для навігаторів стеків, але для навігаторів вкладок, можна налаштувати за допомогою заминки.
  • Передача тільки примітивних даних за допомогою параметрів, щоб уникнути проблем послідовності.
  • або для компонентів екрана, які часто реендерляться.
  • Уникайте важких обчислень при переході навігаційні переходи, робота з відвантаженням .
  • Завжди ручимо захід для незбережених змін підказки.

Висновок

React Navigation надає інтуїтивно зрозумілий, налаштований і виконує шлях управління навігацією в React Native додатках. За допомогою майстерування стека, вкладки, ящика та навігаторів, поряд з параметром проходження, глибоким зв'язком та автентифікаційним потоком, ви можете побудувати надійний мобільний досвід. Для подальших деталей, відносяться до Офіційна документація з React Navigation та , щоб рефагувати свої імплементації . Також розглянемо статті про читання статей спільноти на Реактивна навігація кращі практики[[, щоб реффінувати ваші імплементації.