Стековая навигация и передача параметров

Собираем стек экранов, переходим между ними и передаём данные с экрана на экран.

Стек (Stack) — экраны складываются стопкой: открытие добавляет экран сверху, кнопка «назад» снимает верхний. Это базовый паттерн мобильной навигации.

Создаём стек

Стек создаётся функцией, которая даёт два компонента: Navigator (обёртка) и Screen (один экран).

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

const Stack = createNativeStackNavigator();

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

Первый Screen — стартовый. У каждого экрана есть name (по нему переходим) и component (что рисовать).

Переход на другой экран

Каждый экран-компонент автоматически получает проп navigation. У него есть метод navigate для перехода.

import { View, Text, Button } from "react-native";

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Главный экран</Text>
      <Button
        title="Открыть детали"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

Кнопка «назад» в шапке появляется автоматически — стек сам её рисует.

Передача параметров

Часто на следующий экран нужно передать данные — например, id товара. Их кладут вторым аргументом в navigate.

import { Button } from "react-native";

function ProductsScreen({ navigation }) {
  return (
    <Button
      title="Товар №42"
      onPress={() => navigation.navigate("Product", { id: 42, name: "Кофе" })}
    />
  );
}

Чтение параметров

На принимающем экране параметры лежат в route.params. Экран получает проп route так же автоматически, как и navigation.

import { Text } from "react-native";

function ProductScreen({ route }) {
  const { id, name } = route.params;
  return <Text>Товар {name} (id: {id})</Text>;
}

navigate vs goBack

Параметры — обычный объект

Параметры — это обычный JS-объект. Покажем, как их читают через деструктуризацию (запускаемый пример):

const route = { params: { id: 42, name: "Кофе" } };

const { id, name } = route.params;

console.log("Открыт товар:", name, "с id", id);

Вывод:

Открыт товар: Кофе с id 42

Итог

• Стек создаётся через createNativeStackNavigator; экраны — это Stack.Screen.
• Переход — navigation.navigate('Имя', { данные }); назад — navigation.goBack().
• Параметры читают на целевом экране из route.params.