В мире React Native навигация является важнейшим аспектом создания мобильных приложений. Одной из популярных библиотек навигации является React Navigation, которая предоставляет несколько навигаторов, помогающих перемещаться между экранами. В этой статье мы сосредоточимся на React Native Stack Navigator и рассмотрим различные методы работы, которые улучшат вашу навигацию. Итак, пристегнитесь и приступим!

1. Установка и настройка:
   Прежде чем мы перейдем к методам, давайте убедимся, что в вашем проекте настроены React Navigation и Stack Navigator. Запустите следующую команду в своем терминале:

npm install @react-navigation/native @react-navigation/stack

2. Создание навигатора стека:
   Чтобы начать, импортируйте необходимые компоненты из React Navigation и создайте навигатор стека. Вот пример:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* Screen components */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

3. Добавление экранов.
   Чтобы добавить экраны в навигатор стека, вы можете использовать компонент Screen, предоставляемый навигатором стека. Каждый экран определяется как отдельный компонент, как показано ниже:

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

4. Навигация между экранами.
   Как только вы добавите экраны в навигатор стека, вы сможете перемещаться между ними с помощью реквизита navigation. Вот пример перехода с главного экрана на экран сведений:

import { Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

5. Передача параметров.
   Часто вам придется передавать параметры между экранами. Этого можно добиться, передав объект в качестве второго аргумента метода navigation.navigate. Вот пример:

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details', { id: 1, name: 'John' })}
/>

6. Доступ к параметрам.
   Чтобы получить доступ к параметрам, передаваемым на экран, вы можете использовать реквизит route. Вот как можно получить доступ к параметрам idи nameна экране «Сведения»:

const DetailsScreen = ({ route }) => {
  const { id, name } = route.params;
  // Use the parameters
}

7. Возврат:
   Чтобы вернуться к предыдущему экрану, вы можете использовать метод navigation.goBack(). Вот пример:

import { Button } from 'react-native';
const DetailsScreen = ({ navigation }) => {
  return (
    <Button
      title="Go Back"
      onPress={() => navigation.goBack()}
    />
  );
}

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Welcome' }}
/>

В этой статье мы рассмотрели несколько методов работы React Native Stack Navigator. Мы рассмотрели установку, создание навигатора, добавление экранов, навигацию между экранами, передачу параметров, возврат и настройку заголовка. Освоив эти методы, вы получите необходимые инструменты для создания удобной навигации в ваших приложениях React Native.

Не забудьте ознакомиться с официальной документацией React Navigation для получения более продвинутых функций и возможностей настройки. Приятного кодирования!