Настройка Stack Navigator

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

Для начала необходимо импортировать необходимые функции из библиотеки:

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

Затем создаётся фабрика навигатора с помощью createStackNavigator(). Эта функция возвращает объект с компонентами Navigator и Screen, которые используются для построения структуры:

const Stack = createStackNavigator();

Далее внутри корневого компонента приложения (обычно обёрнутого в NavigationContainer) определяются экраны:

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

Каждый экран задаётся через <Stack.Screen>, где:

  • name — уникальное имя маршрута, используемое при навигации.
  • component — React-компонент, который будет отображаться на этом экране.

Передача параметров между экранами

При переходе на другой экран можно передать данные:

// На экране Home
navigation.navigate('Profile', { userId: 123, userName: 'Анна' });

Здесь navigation — объект, автоматически передаваемый в каждый экран через пропсы.

Получение параметров на целевом экране

Внутри компонента ProfileScreen параметры доступны через пропс route:

function ProfileScreen({ route }) {
  const { userId, userName } = route.params || {};
  return <Text>Профиль: {userName} (ID: {userId})</Text>;
}

Если параметры не переданы, route.params будет undefined, поэтому рекомендуется использовать деструктуризацию с fallback-значением (|| {}), чтобы избежать ошибок.

Эти базовые механизмы позволяют строить гибкую и понятную навигацию между экранами с передачей контекста.